（'＃btnApprove' ）.click（function（）{

（＃btnApprove）。prop（disabled，true）;
console.log（id field value：+

（ ＃ID）VAL（））;

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.

What I have tried:

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 :

 $('#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.

('#btnApprove').click(function () {

("#btnApprove").prop("disabled", true); console.log("id field value: "+

("#id").val());