Starting and getting problems with dialog ui element:

Goal: a grid with delete links on every row. When the link is clicked, a dialog asking if the user is sure about the deleting.

Problem 1: the dialog appears just to first row. Any other after the first doesn’t trigger the dialog box.

Problem 2: I dont know how to finish the procedure.  I don’t know how to go on when the user click ok. How do I say to go on with the link in the <a> tag?

Code:

    <script type="text/javascript">
    $(document).ready(function() {
        var $dialog = $('<div></div>')
            .html('<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>delete row?</p>')


            .dialog({
                                autoOpen: false,
                                resizable: false,
                                title: 'Confirmação',
                                height:140,
                                modal: true,
                                buttons: {
                                'delete': function() {
                                        $(this).dialog('close');

                },
               
















                Cancel: function() {
                   
                    $(this).dialog('close');
                }
            }
        })


        $('#opener').click(function() {
            $dialog.dialog('open');
            // prevent the default action, e.g., following a link
            return false;
        });
    });
    </script>

And the table

…

<tbody>

       <tr>

       <td><a href="http://localhost/delete/1" id="opener"><img src="http://localhost/images/circle-delete.png" /></a>

       </td>

      </tr>

       <tr>

       <td><a href="http://localhost/delete/2" id="opener"><img src="http://localhost/images/circle-delete.png" /></a>

       </td>

      </tr>

       <tr><td>50</td><td>tese</td></tr>      

 </tbody>

     </table>

Any help is welcome.

Thanks Guys

VegasWallacy