how do iterate through the hidden field value for each row in a table using jquery

Question

i have a table which displays all users and the id for each user is stored in hidden field, i want to be able to get the value stored in the hidden on button click event using Ajax or Jquery. Code below:

foreach (var del in approvedList)
 {         
   <tr>
    <td>@del.CampaignName</td>
    <td>@del.Name</td>                           
    <td>@del.ApprovalStatus</td>                            
    <td>  
    <div id="hiddenWrapper" class="row">
      <div class="col-sm-5"><input type="hidden" id="id" name="id" value="@del.PayoutId" />
          <input id="btnApprove" name="btnApprove" class="btn  btn-success" type="button" title="Approve" value="Approve" onclick="location.href='@Url.Action("PayoutApproval", "Account", new { id = @del.PayoutId })'" />
      </div>                                                                
    </div>                                                                                        
  </td>
 </tr>
 }

And the query function is :

 <script>
    $('#btnApprove').click(function () {
    $("#btnApprove").prop("disabled", true);
    console.log("id field value: "+$("#id").val());
    $.ajax({
        url: '/Account/PayoutApproval',
        type: "POST",
        data: JSON.stringify({ id: $("#id").val() }),
        dataType: "json",
        contentType: 'application/json, charset=utf-8',

        success: function (result) {

            if (result.f != null) {
                swal(result.f, "!", "error");
                $("#btnApprove").prop("disabled", false);

            } else {
                swal({
                    title: "Success!",
                    text: result.s,
                    type: "success"
                });
                $('#action').prop('disabled', true).trigger("chosen:updated");
                $("#submitBrdFrm").prop("disabled", true);
                top.location.href = workListUrl;
            }
        }

    });

    return false;
});

While logging the hidden field value, i realized i could only get the value for first row only, subsequent rows return null. I want to be able to get value for each row upon button click, this is my challenge, i am new to front end development.

Answer 1

you don't need to add hidden input just use data attr on button data-id="@del.PayoutId" and bind it to id field as following sample:

foreach (var del in approvedList)
 { 
 <tr>
    <td>@del.CampaignName</td>
    <td>@del.Name</td>                           
    <td>@del.ApprovalStatus</td>                            
    <td>                       
    <div class="row">
      <div class="col-sm-5">
          <input data-id="@del.PayoutId" name="btnApprove" class="btn  btn-success approvebtn" type="button" title="Approve" value="Approve" />
      </div>                                                                
    </div>                                                                                        
  </td>  
</tr>
}

you can handle click on approve as following:

$(document).ready(function() {
    $('.approvebtn').click(function (e) {
    $(this).prop("disabled", true);
    console.log("id field value: "+$(this).data('id'));
     // add your code here
    return false;
   });   
 });

you can get clicked id using $(this).data('id')