jquery-ui - asp.net mvc 4削除ダイアログボックスは最初のアイテムでのみ開きます

Question

部分ビューのリスティング ページがあります。リストごとに、jQuery ダイアログ ボックスを開いてデータを編集/削除するための [編集] リンクと [削除] リンクがあります。ただし、ダイアログ ボックスは最初の項目でのみ開き、残りのリストでは機能しません。

私がしていることに何が欠けていますか？

部分ビュー リスト

>foreach (var item in Model) {
>   <tr>
>       <td>
>           @Html.DisplayFor(modelItem => item.ReportName)
>       </td>
>       <td>
>           @Html.DisplayFor(modelItem => item.Note)
>       </td>
>       <td class="icon"><a id="editReportLink" href="#" title="Edit note"><img src="~/Content/_images/icon_edit.png" /></a></td>
>       <td class="icon"><a id="deleteReportLink" href="#" title="Delete thread"><img src="~/Content/_images/icon_delete.png" /></a></td>
>   </tr>
>}

jQuery関数

$("#delete-button").dialog({
        autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
        resizable: false,
    });

    $("#deleteReportLink").click(function () {
        alert("test");
        $("#delete-button").dialog("open");
    });