ASP.Net Core MVC – Deleting table rows in view is not received properly in POST action method when form submits

I have a table in ASP.Net Core MVC Project. It is bound to a ModelList object MandateCheckDetailsList in my ViewModel. I have a Delete button in each row which is used to delete the particular row. Once the user is satisfied with his added rows, He then submits the form using Next button which calls the POST action method.

The issue is, if there are 5 rows in the table and user deletes the 3rd row, In UI the row is deleted and 4 rows are displayed. But when user submits the form using Next button, the POST action method receives only the 1st and 2nd row details. The 4th and 5th row details are missing. I feel re-indexing of rows is a problem. I am stuck with this issue figuring out and will be grateful for any help.

VIEW CODE:

<div id="mandateCheckDetailsContainer">
<div class="container-fluid">
    <div class="row">
    @{
        int checkNum = 0;
    }
    <div class="table-responsive">
            @{
                var checkCount = 0;
            }
        <table id="checkTable" class="myTable table table-striped table-bordered mainGridTable dataTable no-footer dtr-inline">

            <tr>
                <th>Package</th>
                <th>Country</th>
                <th>Check Name</th>
                <th>Mandate/Non-Mandate</th>
                <th>Country Type</th>
                <th>Action</th>
            </tr>
            
            @for (checkNum = 0; checkNum < Model.MandateCheckDetailsList.Count; checkNum++)
            {
                <tr>
                    @{
                        checkCount = checkNum + 1;
                    }
                    <td>
                        <input type="hidden" asp-for="MandateCheckDetailsList[checkNum].Id" />
                        <input type="hidden" asp-for="MandateCheckDetailsList[checkNum].ClientId" />
                        <select asp-for="MandateCheckDetailsList[checkNum].PackageId" asp-items="@(new SelectList(ViewBag.PackageList, "Value", "Text"))" class="form-control numeric1"><option>Select Package</option></select>
                    </td>
                    <td>
                        <select asp-for="MandateCheckDetailsList[checkNum].CountryId" asp-items="@(new SelectList(Model.CountryList, "Value", "Text"))" class="form-control numeric1 searchableCountry"><option>Select Country</option></select>
                        <span asp-validation-for="MandateCheckDetailsList[checkNum].CountryId" class="text-danger"></span>

                    </td>
                    <td>
                        <select asp-for="MandateCheckDetailsList[checkNum].CheckNameId" asp-items="@(new SelectList(Model.CheckList, "ID", "name"))" class="form-control numeric1"><option>Select Check Name</option></select>
                        <span asp-validation-for="MandateCheckDetailsList[checkNum].CheckNameId" class="text-danger"></span>

                    </td>
                    <td>
                        <select asp-for="MandateCheckDetailsList[checkNum].CheckTypeId" class="numeric1 form-control" asp-items="@(new SelectList(Model.CheckTypelist, "Value", "Text"))"><option>Select Check Type</option></select>
                        <span asp-validation-for="MandateCheckDetailsList[checkNum].CheckTypeId" class="text-danger"></span>

                    </td>
                    <td>
                        <select asp-for="MandateCheckDetailsList[checkNum].CountryTypeId" class="numeric1 form-control" asp-items="@(new SelectList(Model.CountryTypelist, "Value", "Text"))"><option>Select Country Type</option></select>
                        <span asp-validation-for="MandateCheckDetailsList[checkNum].CountryTypeId" class="text-danger"></span>
                        @* <select class="numeric1 form-control">
                            <option>Select Country Type</option>
                            <option value="1">Hiring country</option>
                            <option value="2">Research Jurisdiction</option>
                        </select> *@
                    </td>
                    <td>
                        **<button id="btnDeleteRow" type="button" class="btn btn-danger delete-btn">delete</button>**
                    </td>
                </tr>
            }

        </table>
        <div id="DivNewRow" class="container"></div>
    </div>
    <div class="row mar-top">
        <div class="col-lg-12">
            <input type="button" value="Add" class="btn btn-dark" id="Add" onclick="javascript: addCheck(@checkNum,@checkCount)" />
            <input id="btnLastDeleteRow" type="button" class="btn btn-danger" value="Delete Last Row" />
            <input type="hidden" id="checkCounter" value="@checkNum" />
            <input type="hidden" id="mandateCheckDetailsList_Count" name="mandateCheckDetailsList_Count" value="@Model.MandateCheckDetailsList.Count" />
        </div>
    </div>
</div>
</div>
</div>

JS FILE CODE:

$('#nextBtn').click(function () {    
        $('#clientCheckForm').submit(); 
});


// Handle delete button click
$('#checkTable').on('click', '.delete-btn', function () {
    if (confirm('Are you sure you want to delete ?')) {

        $(this).closest('tr').remove(); // Remove the clicked row

        //// Re-index remaining rows
        //$('#checkTable tr').each(function (index) {
        //    $(this).find('input, select').each(function () {
        //        var name = $(this).attr('name');
        //        var id = $(this).attr('id');

        //        if (name) {
        //            console.log('Original Name:', name);

        //            // Update the name attribute to reflect new index
        //            var newName = name.replace(/[d+]/g, '[' + index + ']');
        //            $(this).attr('name', newName);

        //            console.log('Updated Name:', newName);
        //        }
        //        if (id) {
        //            console.log('Original ID:', id);

        //            // Update the id attribute to reflect new index
        //            var newId = id.replace(/_d+__/, '_' + index + '__');
        //            $(this).attr('id', newId);

        //            console.log('Updated ID:', newId);
        //        }
        //    });
        //});

        $('#mandateCheckDetailsList_Count').val($('#checkTable tr').length);

        var rowCount = $('#checkTable tr').length;

        if (rowCount === 1) { // If there was only one row
            $('#clientCheckForm').submit();
        }

        toastr.success('Deleted successfully.');
    }
});


function addCheck(checkNum, chkcount) {
        var counter = $("#mandateCheckDetailsList_Count").val();
        chkcount = parseInt(counter) + 1;
        if (counter == 0) {
            checkNum = parseInt(counter) + 1;
            document.getElementById('mandateCheckDetailsList_Count').innerText = parseInt(checkNum) + 1;
        }
        else {
            checkNum = parseInt(counter);
            x = document.getElementById("mandateCheckDetailsList_Count").value = checkNum + 1;
        }
        var pkg = "";
        var country = "";
        var check = "";
        var checkType = "";
        var countryType = "";
        var dltBtn = "";

        var clientHidden = '<input type="hidden" id="MandateCheckDetailsList_' + checkNum + '__ClientId" name="MandateCheckDetailsList[' + checkNum + '].ClientId" value="' + $('#MandateCheckDetailsList_0__ClientId').val() + '"/>';
        pkg = "<select id='MandateCheckDetailsList_" + checkNum + "__PackageId' name='MandateCheckDetailsList[" + checkNum + "].PackageId' class='form-control numeric1'></select>";
        country = "<select id='MandateCheckDetailsList_" + checkNum + "__CountryId' name='MandateCheckDetailsList[" + checkNum + "].CountryId' class='form-control numeric1 searchablecountry'></select>";
        check = "<select id='MandateCheckDetailsList_" + checkNum + "__CheckNameId' name='MandateCheckDetailsList[" + checkNum + "].CheckNameId' class='form-control numeric1'></select>";
        checkType = "<select id='MandateCheckDetailsList_" + checkNum + "__CheckTypeId' name='MandateCheckDetailsList[" + checkNum + "].CheckTypeId' class='form-control numeric1'></select>";
        countryType = "<select id='MandateCheckDetailsList_" + checkNum + "__CountryTypeId' name='MandateCheckDetailsList[" + checkNum + "].CountryTypeId' class='form-control numeric1'></select>";
        dltBtn = "<button type='button' class='btn btn-danger delete-btn'>delete</button>"

        var html = "<tr><td>" + clientHidden + pkg + "</td><td>" + country + "</td><td>" + check + "</td><td>" + checkType + "</td><td>" + countryType + "</td><td>" + dltBtn + "</td></tr>";
        $("#checkTable").append(html);
        cc = checkNum;
        $('#MandateCheckDetailsList_0__PackageId option').each(function () {
            $("#MandateCheckDetailsList_" + checkNum + "__PackageId").append('<option value="' + $(this).val() + '">' + $(this).text() + '</option>')
        });
        $('#MandateCheckDetailsList_0__CountryId option').each(function () {
            $("#MandateCheckDetailsList_" + checkNum + "__CountryId").append('<option value="' + $(this).val() + '">' + $(this).text() + '</option>')
        });
        $('#MandateCheckDetailsList_0__CheckNameId option').each(function () {
            $("#MandateCheckDetailsList_" + checkNum + "__CheckNameId").append('<option value="' + $(this).val() + '">' + $(this).text() + '</option>')
        });
        $('#MandateCheckDetailsList_0__CheckTypeId option').each(function () {
            $("#MandateCheckDetailsList_" + checkNum + "__CheckTypeId").append('<option value="' + $(this).val() + '">' + $(this).text() + '</option>')
        });
        $('#MandateCheckDetailsList_0__CountryTypeId option').each(function () {
            $("#MandateCheckDetailsList_" + checkNum + "__CountryTypeId").append('<option value="' + $(this).val() + '">' + $(this).text() + '</option>')
        });
    }

I tried re-indexing of rows. But it is not working. When i try re-indexing as in above code which is commented, no rows are received in POST action method.