title: jQuery Dialog - same dialog from different links
body: <p>I've been having trouble implementing the problem I've had <a href="https://stackoverflow.com/questions/11833008/jquery-dialog-external-links-javascript-not-working/11833134">here</a> for a few days now so I'm trying to come up with an alternative of achieving the same thing. I decided to not use an external file for the form and instead have it internally in my html file. The problem I am encountering now is the dialog only shows up Package 1 and not on Package 2.</p>
  
  <p>The Code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $('#PackageBook').dialog({
          autoOpen: false,
          width: 500,
          height: 400
      });
  
      $('#PackageBookOpen').click(function(){
          $('#PackageBook').dialog('open');
          return false;
      });
  &lt;/script&gt;
  &lt;body&gt;
      &lt;div id="Package1" class="packageDialog"&gt;
          &lt;div id="order"&gt;
              &lt;a id="PackageBookOpen" title="Package Booking" class="ui-state-default ui-corner-all" href="#"&gt;&lt;img src="images/order.png"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="Package2" class="packageDialog"&gt;
          &lt;div id="order"&gt;
              &lt;a id="PackageBookOpen" title="Package Booking" class="ui-state-default ui-corner-all" href="#"&gt;&lt;img src="images/order.png"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="PackageBook" class="packageBookDialog" title="Package Booking"&gt;
          &lt;form name="package" action=""&gt;
                 //Form 
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>