title: Create multiple instance jQuery UI dialog on button click
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>Now Four dialog should be seen on the screen.</p>
  
  <p>Examples:</p>
  
  <p>1) Likewise in Windows we can open "this pc" Multiple Times.<br>
  2) File Explorer Multiple Times.</p></p>
  
  <pre class="lang-js prettyprint-override"><code>$(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');
    });
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="dialog" id="dialog1" title="Basic dialog 1"&gt;
  &lt;/div&gt;
  &lt;div class="dialog" id="dialog2" title="Basic dialog 2"&gt;
  &lt;/div&gt;
  &lt;div class="dialog" id="dialog3" title="Basic dialog 3"&gt;
  &lt;/div&gt;
  &lt;input value="Open Dialog 1" type="button" class="opener" data-id="#dialog1" /&gt;
  &lt;input value="Open Dialog 2" type="button" class="opener" data-id="#dialog2" /&gt;
  &lt;input value="Open Dialog 3" type="button" class="opener" data-id="#dialog3" /&gt;
  </code></pre>