ASP.NET MVC Razor repeated button in table is non-responsive past the first button
<p>In a cshtml file, I have defined a table from a model as follows:</p>

<pre><code>foreach (AppUser user in Model)
{
                if (!(user.UserName.ToLower().Equals("admin")))
                {
                    &lt;tr&gt;

                        &lt;td&gt;@user.UserName&lt;/td&gt;
                        &lt;td&gt;@user.Email&lt;/td&gt;
                        &lt;td&gt;
                            &lt;button class="btn btn-primary btn-xs"
                                    id="edituserbutton" data-id="@user.Id" name="@user.Id"&gt;
                                Edit
                            &lt;/button&gt;
                        &lt;/td&gt;

                        &lt;td&gt;
                            @using (Html.BeginForm("Delete", "Admin",
                                        new { id = user.Id }, FormMethod.Post, new { @id = "manageusersform", name = user.UserName }))
                            {

                                &lt;button class="btn btn-danger btn-xs"
                                        type="submit"&gt;
                                    Delete
                                &lt;/button&gt;
                            }
                        &lt;/td&gt;
                    &lt;/tr&gt;
                }
}
</code></pre>

<p>The Delete button works fine for all the rows, however, the Edit button only works on the first row. Here are the respective functions in jQuery within the document ready function:</p>

<p><code>Edit</code></p>

<pre><code>$("#edituserbutton").click(function (event) 
{

                event.preventDefault();
              // alert("edit clicked");

                $.ajax({
                    url: "/Admin/Edit",
                    cache: false,
                    data: {id : $(this).data('id')}
                }).done(function (htmlResponse) {
                    $("#tabs-1ua").html(htmlResponse);
                });


});
</code></pre>

<p>I used the alert for testing, and past the first row, it was never fired, despite having the id <code>edituserbutton</code> on the Edit button in each row. </p>

<p><code>Delete</code></p>

<pre><code>$("form#manageusersform").submit(function (event) 
{

                event.preventDefault();
                var form = $(this);
                var userNameSelected = form.attr('name');



                confirm("Are you sure you want to delete user \"" + userNameSelected + "\"?").then(function (yesno) {

                    if (yesno === "yes") {


                        $.post(form.attr("action"), form.serialize(), function (res) {



                            if (res.status === "success") {

                                console.log(res);

                                $.ajax({
                                    url: "/Admin/Index",
                                    cache: false,
                                    data: {}
                                }).done(function (htmlResponse) {
                                    $("#tabs-1ua").html(htmlResponse);
                                });
                                //end of updating management tab

                            }
                            else {

                                console.log(res);

                            }
                        });


                    }


                });


});
</code></pre>

<p>In the Delete function above, I am using a custom confirmation dialog, that is what the yesno is for. </p>

<p>What should I do to fix the issue with the Edit buttons?</p>

<p>Thank you.</p>