Multiple instances of JQuery UI dialogs on a page

<a href="#" onclick="jQuery('#dialog1').dialog('open'); return false">Case 1 link</a>
<a href="#" onclick="jQuery('#dialog2').dialog('open'); return false">Case 2 link</a>

<div id="dialog1" title="Title 1">
<p>Body 1</p>
</div>

<div id="dialog2" title="Title 2">
<p>Body 2</p>
</div>

<!--Javascript code-->
<script type="text/javascript">

jQuery(document).ready(function() {
$([1, 2]).each(function() {
var id= this;
jQuery('#dialog' + id).dialog({
bgiframe: true, autoOpen: false, height: 300, modal: true
});
});
});

</script>
<!--EOF:Javascript code-->