title: onClick only works for first button in table
body: <p>I'm trying to make a dynamic table in which each row in the table has a "modify" button that pops up a modal in which will have a form requesting information. </p>
  
  <p>here is my current CSHTML code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
          &lt;h1&gt;Fingerprint Tool&lt;/h1&gt;
          &lt;form id="userIdForm" method="post"&gt;
              Type in your UserId: &lt;input name="userId" type="number" id="formUserId" /&gt;
              &lt;input type="submit" /&gt;
          &lt;/form&gt;
  
          @if (Model != null)
          {
              &lt;h2&gt;List of Fingerprints for user&lt;/h2&gt;
              &lt;div id="tableDiv"&gt;
                  &lt;table class="fingerprintTable"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;User ID&lt;/th&gt;
                              &lt;th&gt;Fingerprint ID&lt;/th&gt;
                              &lt;th&gt;FingerprintGrant ID&lt;/th&gt;
                              &lt;th&gt;PaymentType ID&lt;/th&gt;
                              &lt;th&gt;Fingerprint&lt;/th&gt;
                              &lt;th&gt;IsDeleted&lt;/th&gt;
                              &lt;th&gt;Status ID&lt;/th&gt;
                              &lt;th&gt;Created Date&lt;/th&gt;
                              &lt;th&gt;Updated Date&lt;/th&gt;
                              &lt;th&gt;Modify&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          @foreach (var fingerprint in Model.Fingerprints)
                          {
                              &lt;tr&gt;
                                  &lt;td id="userId"&gt;@fingerprint.UserId&lt;/td&gt;
                                  &lt;td id="fingerprintId"&gt;@fingerprint.FingerprintId&lt;/td&gt;
                                  &lt;td id="fingerprintGrantId"&gt;@fingerprint.FingerprintGrantId&lt;/td&gt;
                                  &lt;td id="paymentTypeId"&gt;@fingerprint.PaymentTypeId&lt;/td&gt;
                                  &lt;td id="fingerprint"&gt;@fingerprint.Fingerprint&lt;/td&gt;
                                  &lt;td id="isDeleted"&gt;@fingerprint.IsDeleted&lt;/td&gt;
                                  &lt;td id="fingerprintStatusId"&gt;@fingerprint.FingerprintStatusId&lt;/td&gt;
                                  &lt;td id="createdDate"&gt;@fingerprint.CreatedDate&lt;/td&gt;
                                  &lt;td id="updatedDate"&gt;@fingerprint.UpdatedDate&lt;/td&gt;
                                  &lt;td&gt;&lt;button id="modifyButton" onclick="modifyFingerprintInfo(@fingerprint.FingerprintId);"&gt;Modify&lt;/button&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          }
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  
              &lt;div id="myModal" class="modal"&gt;
  
                  &lt;!-- Modal content --&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;span class="close"&gt;x&lt;/span&gt;
                      &lt;p id="modalHeader"&gt;&lt;/p&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          }
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is my JS file:</p>
  
  <pre><code>    window.onload = function() {
          $(".modifyButton")
          .click(function() {
              modifyFingerprintInfo($(this).data("fpid"));
          });
      }
  
      function modifyFingerprintInfo(fingerprintId) {
      // call updateStatus hermes endpoint
  
      // Get the modal
      var modal = document.getElementById("myModal");
      // Get the button that opens the modal
      var btn = $(".modifyButton");
      // Get the &lt;span&gt; element that closes the modal
      var span = document.getElementsByClassName("close")[0];
      // When the user clicks on the button, open the modal 
  
      // When the user clicks on &lt;span&gt; (x), close the modal
      span.onclick = function () {
          modal.style.display = "none";
      }
      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function (event) {
          if (event.target === modal) {
              modal.style.display = "none";
          }
      }
      $("#modalHeader").text("Update the status of FingerprintId " + fingerprintId);
  
  }
  </code></pre>
  
  <p>And here is my CSS code:</p>
  
  <pre><code>.modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
      background-color: #fefefe;
      margin: 15% auto; /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 80%; /* Could be more or less, depending on screen size */
  }
  
  /* The Close Button */
  .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
  }
  
  #container {
      width: 100%;
      position: absolute;
      left: 4px;
  }
  </code></pre>
  
  <p>The problem is that when I click on the Modify button in each row, the first time I click, nothing happens, and then the second time it works, but only for the first button in the first row. On top of that, for example if I click on row 4 Modify button, nothing will happen, but when I click on row 1 modify button, it prints out row 4's details. </p>
  
  <p>I'm not sure what's going on, so any help would be greatly appreciated!</p>