jQuery UI move problem

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div id="dlg1" title="TEST1">
  TEST 1<br />
  Sollte eigentlich auf X50 Y33 sein<br />
  <p id="dlg1pos"></p>
</div>
<div id="dlg2" title="TEST2">
  TEST 2<br />
  Sollte eigentlich auf X90 Y73 sein<br />
  <p id="dlg2pos"></p>
</div>

CSS

.ui-widget {
	font-size: 0.8em;
}

.ui-dialog .ui-dialog-titlebar {
    padding: 0 0 0 0.4em;
}

body {
  background-color: black;
}

JavaScript

jQuery( document ).ready( function() {
  var d1 = jQuery("div#dlg1").dialog({ autoOpen: true });
  var d2 = jQuery("div#dlg2").dialog({ autoOpen: true });
  
  setInterval( function() {
  	var p1 = d1.offset(), p2 = d2.offset();
  	jQuery( 'p#dlg1pos' ).text( 'X' + p1.left + ' Y' + p1.top );
  	jQuery( 'p#dlg2pos' ).text( 'X' + p2.left + ' Y' + p2.top );
  }, 100 );
  
  jQuery( 'div' ).each( function( a, b ) {
		jQuery( b ).offset( {
    	left: 50 + a * 40, top: 33 + a * 40
    } );
    
  } );
  
  jQuery("#dlg2").offset( 0, 35 );
} );