削除確認ダイアログはテーブルの最初の行にのみ有効

Question

これは私のテーブルの例です。編集アクションと削除のために2つのアイコンがあります。 削除すると、ポップアップ確認ダイアログを作成します。これは、最初の行の削除アイコンをクリックしたときにのみ機能します。
他の行については、jQueryイベントが欠落しています（動作していません）。

これは私の.phpコーディングファイルです。

<tbody>  
//data connection with db 
while ($row = mysql_fetch_array ($res)) 
{ 
    //data rows 
?> 
<tr class="odd" role="row" id="row_5"> 
    <td align="center"> 
     <a href="#"><img src="../images/sys_icon_edit.png" width="20" height="20" alt="Edit"></a> 
     <a id="id-btn-dialog2" href="#"><img src="../images/icon_trash.png" width="20" height="20" alt="Delete"></a> 
    </td> 
    //other data fields here 
</tr>  
<?php 
} 
?>  
</tbody> 

これは、関連するjqueryです。

jQuery(function($) { 

       $("#id-btn-dialog2").on('click', function(e) {e.preventDefault(); 
       $("#dialog-confirm").removeClass('hide').dialog({ 
         resizable: false, 
         width: '320', 
         modal: true, 
         title_html: true, 
         buttons: [{ 
           html: " Delete ", 
           "class" : "btn btn-danger btn-minier", 
           click: function() { 
            $(this).dialog("close"); 
           }}, 
           { 
           html: " Cancel ", 
           "class" : "btn btn-minier", 
           click: function() { 
            $(this).dialog("close"); 
           } 
          }] 
        }); 
       }); 
}) 

どうすればいいですか？私はちょうどphp、jQuery、javascriptの初心者レベルです。
jQueryコードはインターネット上で見つかったものですが、機能コードではなくタイトルテキストを変更しました。

ありがとうございます。

Answer 1

idの代わりに、削除ボタンにクラスを使用し、動的に追加された行のサポートのためにハンドラーをbodyタグに設定します。

$("body").on('click', ".delete", function(e) { 
      e.preventDefault(); 
      $("#dialog-confirm").removeClass('hide').dialog({ 
        resizable: false, 
        width: '320', 
        modal: true, 
        title_html: true, 
        buttons: [{ 
          html: " Delete ", 
          "class" : "btn btn-danger btn-minier", 
          click: function() { 
           $(this).dialog("close"); 
          }}, 
          { 
          html: " Cancel ", 
          "class" : "btn btn-minier", 
          click: function() { 
           $(this).dialog("close"); 
          } 
         }] 
       }); 
      }); 

Answer 2

要素の複数のインスタンスに対してID /＃を使用しています。

代わりにクラスを使用してみてください。

詳細については、this linkをご覧ください。

これは私がそれをやる方法のExampleです。