Pop up modal only working on first element in table, and wont open again after second click

Question

I am having some trouble with the pop up modal I have implemented into my web application. When I click on the second item within my table of 'users' in this circumstance, the modal does not activate, although when I click on the first one it works. Another thing is when I open the modal on the first item and then close it, and then attempt to re-open it does not pop up. Any ideas? My call to pop up the modal:

$("#update_user_button").click(function() {
                    var userId = +$(this).val();
                    $.get('${pageContext.request.contextPath}/ajax/' + userId, function(user) {
                        $("#updateModal #id").val(user.id);
                        $("#updateModal #name").val(user.name);
                        $("#updateModal #username").val(user.username);
                        $("#updateModal #email").val(user.email);
                        $("#updateModal #authority").val(user.authority);
                    });
                    $("#updateModal").modal('toggle');
                    $("#alert").hide();
                    $("#error_name").hide();
                });

After I submit the modal form using this function below, I cannot activate the modal again.

.ajax({
                    type: "POST",
                    url: "${pageContext.request.contextPath}/updateUser",
                    data: $("#updateForm").serialize(),
                    success: function(response) {
                        $("#alert").show();
                        $("#users_table_container").load("${pageContext.request.contextPath}/users #users_table");
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) { 
                        alert("Status: " + textStatus); alert("Error: " + errorThrown); 
                    } 
                });

The button to instantiate this ajax:

<td>
                    <button data-togle="modal" href="#updateModal" id="update_user_button" class="btn btn-primary" value="${user.id}">Update</button>
                </td>

And then the actual modal itself:

<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="Update User Information" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Update User Information</h4>
            </div>
            <div class="modal-body">

                    <div id="alert" class="alert alert-success fade in">
                        Information has been <strong>successfully</strong> updated.
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    </div>

                <form id="updateForm">
                    <input type="hidden" id="id" name="id" /> 
                    Name:
                    <input type="text" name="name" id="name" class=""/><div id="error_name" class="error_font">Username and password must be between 3 and 30 characters.</div>
                    <br /> 
                    User name:
                    <input type="text" name="username" id="username" />
                    <br /> 
                    Email:
                    <input type="text" name="email" id="email" />
                    <br /> 
                    Authority
                    <select name="authority" id="authority">
                        <option value="ROLE_USER">ROLE_USER</option>
                        <option value="ROLE_ADMIN">ROLE_ADMIN</option>
                    </select>
                    <br />
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="updateUser" type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!--/ modal content: end -->
    </div><!--/ modal dialog: end  -->
</div><!--/ modal: end -->

Answer 1

Looks like the button with id update_user_button is repeated in you table, id of a element must be unique in a document.

In this case use a class attribute instead of ID. Also there is no need to use data-toggle="modal" since you are using $("#updateModal").modal('toggle') in your click handler.

<td>
    <button class="btn btn-primary update_user_button" value="${user.id}">Update</button>
</td>

and

<div class="modal hide fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="Update User Information" aria-hidden="true">

then

// Here we are hiding Modal To show Initially
$("#updateModal").modal({
    show: false
});

$(document).on('click', ".update_user_button", function () {
    var userId = +$(this).val();
    $.get('${pageContext.request.contextPath}/ajax/' + userId, function (user) {
        $("#id").val(user.id);
        $("#name").val(user.name);
        $("#username").val(user.username);
        $("#email").val(user.email);
        $("#authority").val(user.authority);
    });
    $("#updateModal").modal('show');
    $("#alert").hide();
    $("#error_name").hide();
});

Demo: Fiddle