一个页面上有多个Jquery UI对话框

我在一个页面上有多个jQueryUI对话框，很难让modals加载正确的内容。我正在为我尝试加载的每个图像周围的div动态生成ID。我下面的代码正在生成ID，但每个“缩略图”，单击时在对话框中加载错误的对应图像。有什么想法吗？提前感谢您的帮助

这是我的密码

HTML：（缩略图和对话框代码的示例） （id=“ui-id-36”和id=“ui-id-35”是动态生成的内容）

<div class="dialog-wrapper">
    <div class="dialog-thumbnail"><a href="link-to-image-1.png"><img typeof="foaf:Image" src="link-to-thumbnail-1.png"></a>
        <div class="dialog-image" id="ui-id-35"><img src="link-to-larger-image-1.png"></div>
   </div>
</div> 

<div class="dialog-wrapper">
    <div class="dialog-thumbnail"><a href="link-to-image-2.png"><img typeof="foaf:Image" src="link-to-thumbnail-2.png"></a>
        <div class="dialog-image" id="ui-id-36"><img src="link-to-larger-image-2.png">
        </div>
   </div>

jQuery: 
   var id = $('.dialog-thumbnail > .dialog-image').uniqueId().attr('id');
   $('#' + id).dialog({
      autoOpen: false, 
      modal: true,
    });
    $('.dialog-thumbnail').data('linked-dialog-id', id).on('click', function (e) {
      var id = $(this).data('linked-dialog-id');
      $('#' + id).dialog("open");
      event.preventDefault();
    });