Checkbox is not selecting paginated data in JavaScript

I have a C# MVC project , in which I am trying to select all the checkbox using header checkbox in table. but on selection it only selects first page data not all paginated data.

I am using AJAX for capturing selected data.

my table code is below:

<div class="table-container">
<table class="table" id="deviceTable">
<thead>
<tr>
<th><input type="checkbox" id="selectAll"></th>
<th>Device Serial</th>
<th>Device Name</th>
<th>User Name</th>
<th>User Email</th>
                @* <th>Migration Not Started</th>
<th>Migration In Progress</th>
<th>Migration Completed</th>
<th>Migration Failed</th> *@
 
                <th>Last Updated Time</th>
<th>Wave/Ring Number</th>
<th>Overall Status</th>
</tr>
</thead>
<tbody id="deviceTableBody">
            @foreach (var item in Model)
            {
<tr>
<td><input type="checkbox" class="row-checkbox" data-id="@item.DeviceSerial"></td>
<td>@item.DeviceSerial</td>
<td>@item.DeviceName</td>
<td>@item.UserName</td>
<td>@item.UserEmail</td>
                    @* <td>@(item.MigrationNotStarted ? "Not Started" : "Started")</td>
<td>@(item.MigrationInProgress ? "In Progress" : "Not In Progress")</td>
<td>@(item.MigrationCompleted ? "Completed" : "Not Completed")</td>
<td>@(item.MigrationFailed ? "Failed" : "Not Failed")</td> *@
 
                    <td>@item.LastUpdatedTime</td>
<td>@item.WaveNumber</td>
<td class="overall-status">
                        @if (item.OverallStatus == "In Progress")
                        {
<span class="circle blue" data-status="In Progress" id="[email protected]"></span>
                        }
                        else if (item.OverallStatus == "Failed")
                        {
<span class="circle red" data-status="Failed" id="[email protected]"></span>
                        }
                        else if (item.OverallStatus == "Completed")
                        {
<span class="circle green" data-status="Completed" id="[email protected]"></span>
                        }
                        else if (item.OverallStatus == "Not Started")
                        {
<span class="circle yellow" data-status="Not Started" id="[email protected]"></span>
                        }
                        else if (item.OverallStatus == "Completed(Manually)")
                        {
<span class="circle greenyellow" data-status="Completed(Manually)" id="[email protected]"></span>
                        }
                        @item.OverallStatus
</td>
</tr>
            }
</tbody>
</table>
</div>

also my AJAX is below:

$(document).ready(function () {
    // Handle select all checkbox
    $('#selectAll').click(function () {
        $('.row-checkbox').prop('checked', this.checked);
    });
 
    // Handle individual row checkbox change
    $('.row-checkbox').change(function () {
        if (!this.checked) {
            $('#selectAll').prop('checked', false);
        }
    });
 
    // Handle Mark as Completed button click
    $('#markAsCompleted').click(function () {
        var selectedIds = [];
        $('.row-checkbox:checked').each(function () {
            selectedIds.push($(this).data('id'));
        });
 
        console.log(selectedIds);
 
        var serializedData = JSON.stringify(selectedIds); // Convert data to JSON string as an array
        console.log("serializedData", serializedData);
 
        if (selectedIds.length > 0) {
            $.ajax({
                url: '/Home/MarkAsCompleted',
                type: 'POST',
                contentType: 'application/json',
                data: serializedData,
                success: function (response) {
                    // Update the UI to reflect the changes
                    selectedIds.forEach(function (id) {
                        var row = $('#circle-' + id).closest('tr');
                        row.find('.overall-status').html('<span class="circle greenyellow" data-status="Completed(Manually)"></span>Completed(Manually)');
                    });
                },
                error: function (error) {
                    console.log("Error updating status: ", error);
                }
            });
        } else {
            alert('Please select at least one row to mark as completed.');
        }
    });
});

when I console log below JavaScript code:

// Handle select all checkbox
    $('#selectAll').click(function () {
        $('.row-checkbox').prop('checked', this.checked);
    })

it does not capture all the selected values.

I am new to this , any help will be thankful.