onClick only works for the first button of the table


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.

here is my current CSHTML code:

    <div id="container">
        <h1>Fingerprint Tool</h1>
        <form id="userIdForm" method="post">
            Type in your UserId: <input name="userId" type="number" id="formUserId" />
            <input type="submit" />

        @if (Model != null)
            <h2>List of Fingerprints for user</h2>
            <div id="tableDiv">
                <table class="fingerprintTable">
                            <th>User ID</th>
                            <th>Fingerprint ID</th>
                            <th>FingerprintGrant ID</th>
                            <th>PaymentType ID</th>
                            <th>Status ID</th>
                            <th>Created Date</th>
                            <th>Updated Date</th>
                        @foreach (var fingerprint in Model.Fingerprints)
                                <td id="userId">@fingerprint.UserId</td>
                                <td id="fingerprintId">@fingerprint.FingerprintId</td>
                                <td id="fingerprintGrantId">@fingerprint.FingerprintGrantId</td>
                                <td id="paymentTypeId">@fingerprint.PaymentTypeId</td>
                                <td id="fingerprint">@fingerprint.Fingerprint</td>
                                <td id="isDeleted">@fingerprint.IsDeleted</td>
                                <td id="fingerprintStatusId">@fingerprint.FingerprintStatusId</td>
                                <td id="createdDate">@fingerprint.CreatedDate</td>
                                <td id="updatedDate">@fingerprint.UpdatedDate</td>
                                <td><button id="modifyButton" onclick="modifyFingerprintInfo(@fingerprint.FingerprintId);">Modify</button></td>

            <div id="myModal" class="modal">

                <!-- Modal content -->
                <div class="modal-content">
                    <span class="close">x</span>
                    <p id="modalHeader"></p>


Here is my JS file:

    window.onload = function() {
        .click(function() {

    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 <span> 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 <span> (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);


And here is my CSS 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:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;

#container {
    width: 100%;
    position: absolute;
    left: 4px;

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.

I'm not sure what's going on, so any help would be greatly appreciated!

You can use class instead of id for identifying more than one element. The id attribute is intended to be used for a single element and if more than one has the same id, only 1 will be selected.

Secondarily, you don't want to be setting click event handlers inside of click event handlers. Let's do it all at once.

I see you have this question tagged with jQuery so you can use:

<button class="modifyButton" data-fpid="1111">Modify</button>

$(".modifyButton").click(function() {
    $("#modalHeader").text("Update the status of FingerprintId " + $(this).data("fpid");

This shows that by using id, only the first one fires:

$("#button").click(function() {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Clicked button ONE</button><br /><br />
<button id="button">Clicked button TWO</button><br /><br />
<button id="button">Clicked button THREE</button>

This shows that by using class, any of them fire:

$(".button").click(function() {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" data-fpid="111">Clicked button ONE</button><br /><br />
<button class="button" data-fpid="222">Clicked button TWO</button><br /><br />
<button class="button" data-fpid="333">Clicked button THREE</button>