title: Why is the second dialogue not opening?
body: <p>I want to use the jquery UI dialogue to create a few popups with extra information.</p>
  
  <p><a href="http://api.jqueryui.com/dialog/" rel="nofollow">http://api.jqueryui.com/dialog/</a></p>
  
  <p>If I add one dialogue it works, but the second one I add does not seem to work.</p>
  
  <p>I tried a few things but I must be overlooking something. </p>
  
  <p>To test it I also modified the example file of Jquery UI and also there the second dialogue does not show up. </p>
  
  <p>Does anybody have some good tips for me?</p>
  
  <p>The original files can be downloaded from <a href="http://jqueryui.com/download/" rel="nofollow">http://jqueryui.com/download/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#dialog").dialog({
    autoOpen: false,
    width: 400,
    buttons: [{
      text: "Ok",
      click: function() {
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
      }
    }]
  });
  
  // Link to open the dialog
  $("#dialog-link").click(function(event) {
    $("#dialog").dialog("open");
    event.preventDefault();
  });
  
  $("#dialog2").dialog({
    autoOpen: false,
    width: 400,
    buttons: [{
      text: "Ok",
      click: function() {
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
      }
    }]
  });
  
  // Link to open the dialog
  $("#dialog-link2").click(function(event) {
    $("#dialog2").dialog("open");
    event.preventDefault();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font: 62.5%"Trebuchet MS", sans-serif;
    margin: 50px;
  }
  .demoHeaders {
    margin-top: 2em;
  }
  #dialog-link {
    padding: .4em 1em .4em 20px;
    text-decoration: none;
    position: relative;
  }
  #dialog-link span.ui-icon {
    margin: 0 5px 0 0;
    position: absolute;
    left: .2em;
    top: 50%;
    margin-top: -8px;
  }
  #icons {
    margin: 0;
    padding: 0;
  }
  #icons li {
    margin: 2px;
    position: relative;
    padding: 4px 0;
    cursor: pointer;
    float: left;
    list-style: none;
  }
  #icons span.ui-icon {
    float: left;
    margin: 0 4px;
  }
  .fakewindowcontain .ui-widget-overlay {
    position: absolute;
  }
  select {
    width: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css" rel="stylesheet"/&gt;
  &lt;!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --&gt;
  
  &lt;h2 class="demoHeaders"&gt;Dialog&lt;/h2&gt;
  &lt;p&gt;&lt;a href="#" id="dialog-link" class="ui-state-default ui-corner-all"&gt;&lt;span  class="ui-icon ui-icon-newwin"&gt;&lt;/span&gt;Open Dialog&lt;/a&gt;
  &lt;/p&gt;
  
  &lt;h2 class="demoHeaders"&gt;Dialog2&lt;/h2&gt;
  &lt;p&gt;&lt;a href="#" id="dialog-link2" class="ui-state-default ui-corner-all"&gt;&lt;span class="ui-icon ui-icon-newwin"&gt;&lt;/span&gt;Open Dialog&lt;/a&gt;
  &lt;/p&gt;
  
  &lt;!-- ui-dialog --&gt;
  &lt;div id="dialog" title="Dialog Title"&gt;
    &lt;p&gt;number 1&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;!-- ui-dialog --&gt;
  &lt;div id="dialog1" title="Dialog Title"&gt;
    &lt;p&gt;number 2&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>