Multiple jQuery UI buttons with same ID

Question

There might be a really simple solution to this question, but i just don't see it!

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...

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.

Heres the display part:

<div id="2">
  <div id="56">
    <button id="add-audio-file" class="ui-button ui-state-default ui-corner-all">betty_2.mp3</button>
  </div>
</div>

<div id="2">
  <div id="57">
    <button id="add-audio-file" class="ui-button ui-state-default ui-corner-all">betty_3.mp3</button>
  </div>
</div>

And here comes the js Part:

    $('#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');
                }
        );

    });

I am using jquery 1.4.2 and jquery ui 1.8rc3 Any ideas?

Answer 1

Aren't duplicate ID's in a document bad practice?

Answer 2

The buttons all have the same id

id is identifier for an element, you can not set that for more than one element. Try giving your buttons class instead and see if it works after that.