JQuery 10.3 Overlapping Bug

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

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<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" style="height:100%;width:100%;position:absolute"></div>

JavaScript

$(function () {
	    var dlg1 = $("#dialog").dialog({
	        autoOpen: false
	    });
	    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');
        
        dlg2.parent('.ui-dialog').css({ top: '100px', left: '100px' });

	});