I am having an issue when saving inside of the add-comment modal. When I click on "save" inside of the modal it is triggers depending on how many times I have previously opened that modal. 

The form I am working with is dynamic so there could be 1 to many comments to be added. I only want to use one modal to insert comments in a hidden field (not shown) 

I am very confused to why when i click on the 

**TEST CASE**

```
Launch Page

Open the comment modal using the comment icon

Click Save

Repeat open and saving the comment modal multiple times.

Look inside of console to see

"In Save Comment: " + i

Where i equals the number of times it is in that function.

```

**HTML**

```
<form id="requestForm">
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#detailsModal"><span class="glyphicon glyphicon-share" aria-hidden="true"></span></button>
  <button type="button" class="btn btn-default" data-add-comment><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>
</form>

<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="detailsModalLabel">User Details</h4>
      </div>
      <div class="modal-body">
        <table class="table table-bordered">
          <tbody>
            <tr>
              <td class="col-sm-3"><strong>Name</strong></td>
              <td class="col-sm-4" id="info-name"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- End Details Modal -->
<!-- Comments Modal -->
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="commentModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <textarea id="modalComTxt" class="form-control" rows="4" maxlength="512"></textarea>
        <p>Characters left: <span id="txtAreaCount">512</span></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button id="save-comment" type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
      </div>
    </div>
  </div>
</div>

```

**JAVASCRIPT**

```
$("#requestForm").on('click', '[data-add-comment]', function() {
  var curComBtn = $(this);
  var curComment = curComBtn.prev().val();
  var modalTxt = $('#modalComTxt');
  var commentModal = $('#commentModal');

  modalTxt.val(curComment); //set the modal value with existing comment
  var i = 1;
  $('#txtAreaCount').text((512 - modalTxt.val().length)); //change text count in modal

  commentModal.modal('toggle');

  //Function when clicking save in modal

  $('#save-comment').click(function() {

    console.log("In Save Comment: " + i)
    i++
    console.dir(curComBtn.prev());
    curComBtn.prev().val(modalTxt.val());
  });

});

```