jQuery Multiple "opener" buttons for one dialog

Question

I have about a million buttons trying to all open one single dialog from jQuery UI. The first button on the page opens the Dialog fine, however every other button on the page doesn't do anything, they all have the same id and I am just using the basic dialog script from the site (I'm new to pretty much all of JS).

Here is the code;

<td style="height:15px"><input type="button" id="opener" value="Edit" onClick="currentroom( 0,0 )"></td>

Thats an example if one of the buttons.

<div id="dialog" title="Set Room Type">
<a onClick="changeroomblank()"><img src="img/blank.png" alt="No room" width="32" height="32"></a>

That is the start of the dialog div

And finally.

<script>

$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});

</script>

So it is pretty much all copy and pasted from the site, but everywhere I look for help all I see is how to get actual buttons on the dialog, which I don't need.

Answer 1

Since id is unique, you need to use class instead:

<td style="height:15px"><input type="button" class="opener" value="Edit" onClick="currentroom( 0,0 )">

then you can do:

$(function() {
    $("#dialog" ).dialog({ autoOpen: false });
    $(".opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
    });
});

Also, remember to wrap your code inside DOM ready handler $(function() {...}); to make sure all of your DOM elements are added properly before executing your javascript.