クリックイベント時にボタン固有のidを取得したい

Question

JavascriptでPHP配列データごとに<td>タグを動的に生成し、隣に削除ボタンを設置したいです。
削除ボタンをクリックした時に、クリックしたボタンの固有のid番号を取得したいのですが、下図のようにアラートで確認するとすべての行が同じid番号になってしまい行き詰まっています。

<!--モーダルここから-->
 <div class="modal fade" id="Modal" tabindex="-1" role="dialog" arialabelledby="myModalLabel">
        <div class="modal-dialog" role="document">
                 <div class="modal-content">
                          <div class="modal-header">
                                 <h5 class="modal-title"></h5>
                                 <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
                                       <span aria-hidden="true">×</span>
                                 </button>
                          </div>
                          <div class="modal-body">
                                 <table class="contents">
                                     <!-- この部分にデータがフィールドごとに動的に表示される -->
                                 </table>
                          </div>
                 </div>
        </div>
 </div>
<!--モーダルここまで-->

$(function() {

      $('#Modal').on('show.bs.modal', function(event) { //ID部分をモーダルとして表示させるイベントが発生

        $('.modal-content tr').remove() //li要素をあらかじめ初期化

        var button = $(event.relatedTarget); //モーダルを呼び出すときに使われたボタンを取得

        var date = button.data('day'); //日付を取得
        var data = button.data('task'); //予定を配列で取得
        var id = button.data('id'); //予定に付随したidを配列で取得

        var modal = $(this); //モーダルを取得

        $('.modal-title').text(date + '日の予定'); //日付をモーダルに反映

        for (var i = 0; i < data.length; i++) {
          $('.contents').append('<tr><td>' + data[i] + '</td><td><input type="button" class="delete" value="削除" data-delete="' + id[i] + '"></td></tr>'); //予定とidをモーダルに反映
        }

        /* Ajax で削除機能実装*/
        $('.delete').click(function() {
          //クリックしたボタンのdata属性からidを取得し、同じidを削除する
          var id = $('.delete').data('delete');
          alert(id); //←★★★ここの値が全て一緒になってしまう★★★
        })
      })
    });

試しに「<p> id[i] </p>」などで画面に表示させた場合は、ちゃんと行ごとの固有のidを確認することができます。
クリックイベントでの設定方法に不備があるのでしょうか？
おそれいりますが、よろしくお願いいたします。

Answer 1

        $('.delete').click(function() {
          //クリックしたボタンのdata属性からidを取得し、同じidを削除する
          var id = $('.delete').data('delete');
          alert(id); //←★★★ここの値が全て一緒になってしまう★★★
        })

って結局押されたボタン関係無く $('.dalete') で該当のクラスの要素まとめて取ってきている気がします。
なので、クリックされた要素のattrを指定して値を取得するのはどうでしょう。

        $('.delete').click(function() {
          //クリックしたボタンのdata属性からidを取得し、同じidを削除する
          var id = $(this).attr("data-delete");
          alert(id);
        })

※動作確認していないので動かない可能性大です。
ただ何となくイメージがついて貰えたら嬉しいです。

Comments

[pararinrinrin]

ご回答いただいたコードの通りに実装したら見事にそれぞれのid取得できました！ありがとうございます！