Create multiple instance jQuery UI dialog on button click

Question

I want to create multiple instance jQuery Dialog UI. I also want to create the multiple clone of each jQuery Dialog UI with same Title.

If I click on Open Dialog 1, then Basic dialog 1 will open. If I again click on Open Dialog 1 it should generate the clone of basic dialog 1 with same title.

If I click on Open Dialog 2. Then Basic dialog 2 will open. If I again click on Open Dialog 2 it should generate the clone of basic dialog 2 with same title.

Now Four dialog should be seen on the screen.

Examples:

1) Likewise in Windows we can open "this pc" Multiple Times.
2) File Explorer Multiple Times.

$(function() {
  $('.dialog').dialog({
    autoOpen: false
  });
  $('.opener').click(function() {
    var d = $('.dialog').clone().appendTo('body'),
      tab = $(this).attr('alt') - 1;
    d.dialog({
      autoOpen: false,
      close: function(e, ui) {
        $(this).dialog('destroy').remove();
      }
    });
    console.log(tab);
    d.find('.dtabs').tabs({
      active: tab
    });
    d.dialog('open');
    $(this).data('id');
  });
});

<div class="dialog" id="dialog1" title="Basic dialog 1">
</div>
<div class="dialog" id="dialog2" title="Basic dialog 2">
</div>
<div class="dialog" id="dialog3" title="Basic dialog 3">
</div>
<input value="Open Dialog 1" type="button" class="opener" data-id="#dialog1" />
<input value="Open Dialog 2" type="button" class="opener" data-id="#dialog2" />
<input value="Open Dialog 3" type="button" class="opener" data-id="#dialog3" />

Answer 1

You can use the data() method to find the target dialogue, and then clone it as shown below:

 $(function() { $('.opener').click(function() { var targetSelector = $(this).data('id'); var $target = $(targetSelector); var d = $target.clone().appendTo('body'); d.dialog({ close: function(e, ui) { $(this).dialog('destroy').remove(); } }); }); }); 

 #dialog1, #dialog2, #dialog3 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> <div class="dialog" id="dialog1" title="Basic dialog 1"></div> <div class="dialog" id="dialog2" title="Basic dialog 2"></div> <div class="dialog" id="dialog3" title="Basic dialog 3"></div> <input value="Open Dialog 1" type="button" class="opener" data-id="#dialog1" /> <input value="Open Dialog 2" type="button" class="opener" data-id="#dialog2" /> <input value="Open Dialog 3" type="button" class="opener" data-id="#dialog3" />