IDs in an HTML document need to be unique. You are assigning the same ID to the hidden input in each row. You are also assigning the same ID to each button.
There's also no point adding an
onclick
attribute to the button if you're simply going to cancel that handler elsewhere.
Change your markup code to:
<input type="hidden" name="id" value="@del.PayoutId" />
<input name="btnApprove" class="btn btn-success" type="button" title="Approve" value="Approve" />
Change the script to:
$(document).on("click", "input[name='btnApprove']", function(e){
e.preventDefault();
var btn = $(this);
btn.prop("disabled", true);
var id = btn.closest("tr").find("input[name='id']").val();
console.log("id field value:", id);
$.ajax({
url: '/Account/PayoutApproval',
type: "POST",
data: JSON.stringify({ id: id }),
dataType: "json",
contentType: 'application/json, charset=utf-8',
success: function (result) {
if (result.f != null) {
swal(result.f, "!", "error");
btn.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;
}
}
});
});