javascript - ASP.NET MVC Razor repeated button in table is non-responsive past the first button -

in cshtml file, have defined table model follows:

foreach (appuser user in model) {                 if (!(user.username.tolower().equals("admin")))                 {                     <tr>                          <td>@user.username</td>                         <td>@user.email</td>                         <td>                             <button class="btn btn-primary btn-xs"                                     id="edituserbutton" data-id="@user.id" name="@user.id">                                 edit                             </button>                         </td>                          <td>                             @using (html.beginform("delete", "admin",                                         new { id = user.id }, formmethod.post, new { @id = "manageusersform", name = user.username }))                             {                                  <button class="btn btn-danger btn-xs"                                         type="submit">                                     delete                                 </button>                             }                         </td>                     </tr>                 } } 

the delete button works fine rows, however, edit button works on first row. here respective functions in jquery within document ready function:

edit

$("#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);                 });   }); 

i used alert testing, , past first row, never fired, despite having id edituserbutton on edit button in each row.

delete

$("form#manageusersform").submit(function (event)  {                  event.preventdefault();                 var form = $(this);                 var usernameselected = form.attr('name');                    confirm("are sure want 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);                              }                         });                       }                   });   }); 

in delete function above, using custom confirmation dialog, yesno for.

what should fix issue edit buttons?

thank you.

your markup wrong. having same id buttons. invalid. id's should unique.

i suggest remove id markup , use css class jquery selector.

<button class="btn btn-primary btn-xs delbtn" data-id="@user.id"> edit </button> 

and

$(function(){     $("button.delbtn").click(function(e){        e.preventdefault();        var btnclicked = $(this);        var idtosend =  btnclicked.data("id");         //do ajax call.      });  });