jquery - jQuery と Twitter ブートストラップ モーダルの連携

Question

ブートストラップでは、ボタン 1 からボタン 6 までの複数の div があります。jquery を使用すると、モーダルが別の 2 つのボタン、キャンセル、確認とともに表示されます。

ここで確認をクリックすると、モーダルが閉じてボタンの状態が変わります。たとえば、Button1 が「Clicked」に変わります。キャンセルをクリックすると、モーダルが閉じます。

問題はこれです：最初のボタンをクリックしてキャンセルし、2番目のボタンをクリックして確認すると、両方のボタンが「クリック済み」に変わります

4つボタンでも5つボタンでも同じです。

私のhtml

<!-- START OF PAID CUSTOM MODAL -->
<div id="paid-custom-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Fees Payment For</h3>
  </div>
  <div class="modal-body">
    CONFIRM?
  </div>
  <div class="modal-footer">
    <button class="paid-custom-cancel btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    <button class="paid-custom-confirm btn btn-primary">Confirm</button>
  </div>
</div>
<!-- END OF PAID CUSTOM MODAL -->
  <div class="paid-custom">BUTTON 1</div>
  <div class="paid-custom">BUTTON 2</div>
  <div class="paid-custom">BUTTON 3</div>
  <div class="paid-custom">BUTTON 4</div>
  <div class="paid-custom">BUTTON 5</div>
  <div class="paid-custom">BUTTON 6</div>

私のjquery

$(document).ready(function(){
  $(document).on('click', ".paid-custom", function() {
    var $this=$(this);

    $('#paid-custom-modal').modal();

    $(document).on('click', ".paid-custom-confirm", function() {
       $this.html('CLICKED');
        $('#paid-custom-modal').modal('hide');
    });
  });
});