The following JavaScript renders either a green checkmark button or a red X button in a jQuery datatable column:

{
    data: "HasPayment",
    render: function (data, type, row, meta) {
        if (data) {
            return '<button class="hasPayment\ btn btn-link" id=n-"' + meta.row + '"><span class="fas fa-solid fa-check" style="color: green"></span></button>';
        }
        return '<button class="hasPayment\ btn btn-link" id=n-"' + meta.row + '"><span class="fas fa-solid fa-times" style="color: red"></span></button>';
    }
}

The following JavaScript is called when one of the buttons (green checkmark or red X) is clicked:

$('#HR_Payment_DataTable tbody').on('click', '.hasPayment', function () {
    var id = $(this).attr("id").match(/\d+/)[0];
    var data = $('#HR_Payment_DataTable').DataTable().row(id).data();
    var url = `Payment/Set?applicationId=${data[14]}&year=${data[12]}&month=${data[13]}&hasPayment=${data[11]}`;
    $.ajax({
        url: url,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function () {
            dataTable.ajax.reload();
        },
        error: () => {
            console.error("500 Internal Server Error.");
        }
    });
});

When I click one of the buttons, I get a console error that the values in url are undefined.

I am following this example: http://live.datatables.net/qemodapi/975/edit

This is how a row looks like

{
    ActivityPhase: "Complete"
    ActivityPhaseDate: "/Date(219999600000)/"
    Address: "123 N Main"
    AppNumber: 54
    Client: "Bob Ben"
    EscrowAccountNumber: "123456"
    EscrowWithCity: true
    HasPayment: false
    Hrdbid: null
    Id: "a21d627e-97ab-477f-afc1-27c2637f7c05"
    Month: 6
    Notes: null
    Year: 2022
}