JQuery 10.3 Overlapping Bug

Clicking on a dialog does not bring it to the front of the other one.

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://sites.google.com/site/juiscoped/css/jquery-ui-1.10.3.custom.css">
<div id="dialog" title="Basic dialog">
    <p>This is the first dialog.</p>
</div>
<div id="dialog2" title="Basic dialog">
    <p>This is the second dialog.</p>
</div>
<div id="frm1" style="height:100%;width:100%;position:absolute"></div>
<div id="frm2" class="scoped" style="height:100%;width:100%;position:absolute"></div>

JavaScript

$(function () {
	    var dlg1 = $("#dialog").dialog({
	        autoOpen: false,
	        dialogClass: 'scoped'
	    });
	    var dlg2 = $("#dialog2").dialog({
	        autoOpen: false
	    });

	    dlg1.parent('.ui-dialog').appendTo($('#frm1')).draggable("option", "containment", 'parent').resizable("option", "containment", 'parent');
	    dlg2.parent('.ui-dialog').appendTo($('#frm2')).draggable("option", "containment", 'parent').resizable("option", "containment", 'parent');

	    dlg1.dialog('open');
	    dlg2.dialog('open');
        
	    dlg1.parent('.ui-dialog').css({
	        top: '20px',
	        left: '20px'
	    });        

	    dlg2.parent('.ui-dialog').css({
	        top: '200px',
	        left: '200px'
	    });

	});