Livewire checkbox selecting items on previous page for a paginated page - php

Question

Please help, I'm currently working on this livewire project. The page is paginated with checkboxes. When I check boxes on the next page, it reloads the data on the first page and selects another item of the same number in the row. So if try to select a checkbox of row 3 on the second page, data will refresh to show items of previous page, and select the checkbox of row 3
I'm unable to figure it out, someone please help.
Below is my code
{
$tracking_dates = Tracking::select(DB::raw('max(created_at) as created_at'))
->groupBy('tracking_number')
->get();
$this->trackings = Tracking::query()
->when(Auth::user()->hasRole('user'), function($query){
$query->whereHas('PurchaseRequest', function($sub_query) {
$sub_query->where('user_id', '=', Auth::id());
});
})
->whereIn('created_at', $tracking_dates)
->paginate(20);
return view('livewire.index-tracker', [
'trackings' => $this->trackings,
'trackingStatus' => TrackingStatus::all(),
]);
}
My view Code
<form>
<table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
#role('superadministrator')
<th>Multiple Action Select</th>
#endrole
<th>Item(s) Type</th>
<th>Tracking Number</th>
<th>Tracking Status</th>
<th>Invoice</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#if(count($trackings) > 0)
#foreach($trackings as $key=>$tracking)
<tr>
#role('superadministrator')
<td>
{{$tracking->id}}
<input type="checkbox" value="{{$tracking->id}}" wire:model="selected">
</td>
#endrole
<td>
{{$tracking->purchase_request_id != "" ? "Purchase Request" : NULL}}
{{$tracking->shipment_id != "" ? "Shipment" : NULL}}
</td>
<td>{{$tracking->tracking_number}}</td>
<td>{{$tracking->TrackingStatus->name}}</td>
<td>
<i class="mdi mdi-eye font-18"></i>
</td>
<td>
<i class="mdi mdi-eye font-18"></i>
{{-- #role('superadministrator')--}}
<i class="mdi mdi-pencil font-18"></i>
{{-- #endrole--}}
</td>
</tr>
#endforeach
#else
<tr>
<td colspan="5">No data available</td>
</tr>
#endif
</tbody>
</table>
#role('superadministrator')
<div class="form-group row">
<button wire:click.prevent="store()" class="btn btn-primary btn-md">Track</button>
</div>
</form>
#if(count($trackings) > 0)
{{ $trackings->links() }}
#endif```

Answer 1

You can call the javascript page.dt() event and store all ids you have checked into local storage.
Please refer below code for that.
var checkedData = [];
$('#tableID').on( 'page.dt', function () {
let allIds = localStorage.getItem("row-data-ids").split(",");
$('.checkboxes:checkbox:checked').each(function(index, rowId){
if($.inArray( $(this).val(), allIds) == -1){
checkedData.push($(this).val());
}
});
localStorage.setItem('row-data-ids', checkedData);
} );
You can also store local storage values to hidden variable to get into POST Request.