title: Multiple jQuery UI buttons with same ID
body: <p>There might be a really simple solution to this question, but i just don't see it!</p>
  
  <p>I have a page with a list of items. every item has the same jquery ui button (its inside a dialog and adds that item to a list). i identify the item via the parenting DIV holding the DB id. So far so good...</p>
  
  <p>The Problem is only the first button on the list works! The second, third etc. buttons don't show any reaction at all. The buttons all have the same id - as the list is dynamic and the same action is triggered with every click. Only the parenting ID changes.</p>
  
  <p>Heres the display part:</p>
  
  <pre><code>&lt;div id="2"&gt;
    &lt;div id="56"&gt;
      &lt;button id="add-audio-file" class="ui-button ui-state-default ui-corner-all"&gt;betty_2.mp3&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="2"&gt;
    &lt;div id="57"&gt;
      &lt;button id="add-audio-file" class="ui-button ui-state-default ui-corner-all"&gt;betty_3.mp3&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here comes the js Part:</p>
  
  <pre><code>    $('#add-audio-file').click(function() {
          assetID = $(this).parent('div').attr('id');
          pageID = $(this).parent('div').parent('div').attr('id');
          $.post(
              "modules/portfolio/serialize.php", 
              {id : pageID, assetid : assetID, do : "add-audio-file"},
                  function(data, textStatus, xhr) {
                      $('#dialog-add-audio').dialog('close');
                  }
          );
  
      });
  </code></pre>
  
  <p>I am using jquery 1.4.2 and jquery ui 1.8rc3
  Any ideas?</p>