title: Dynamic jQuery Dialog Box
body: <p>I come here a lot and find this place to be very useful. My first time posting and I hope someone could help me.</p>
  
  <p>I have a page creating multiple links.
  When you click on a link, it opens a specific dialog box pertaining to that link. That dialog contains a form with all data specific to that link id
  But when I submit, it appears that data belonging to first link submits, whichever dialog box is opened.</p>
  
  <p>When I click on a link, here is the code that opens and properly populate dialog according to the <code>$link.attr('href')</code>
  The save button executes <code>$('#prefForm').submit();</code>
  Now I got the feeling that when I click on a link, it opens all dialogs links, keeping them in the background, therefore creating multiple id prefForm so the first one for first link sends its data</p>
  
  <p>I can't assign different ids as those forms are dynamically generated and id will be unknow.</p>
  
  <p>Does anyone knows how to prevent other data to load only on demand and not all of them in the background?</p>
  
  <pre><code>    $(document).ready(function() {
          $('#bidders td a').each(function() {
              var $link = $(this);
              var $dialog = $('&lt;div&gt;&lt;/div&gt;')
                  .load($link.attr('href') + ' #content')
                  .dialog({
                      autoOpen: false,
                      title: $link.attr('title'),
                      width: 600,
      buttons: [
          {
              text: "Cancel",
              className: 'cancelButtonClass',
              click: function() {
                  $dialog.dialog('close');
              }
          },
          {
              text: "Save",
              className: 'saveButtonClass',
              click: function() { 
                   $('#prefForm').submit();
                   $dialog.dialog('close');
              }
          }
  </code></pre>