Ajax function keeps messing up after inserting 24-25 records into the db - ajax

Question

I have a multi select checkbox with 30-80 inputs, I wrote an Ajax code for this form, once checkbox is selected it sends records to the database.
Problem occurs after selecting 25th or 26th record, error is saying that value is duplicated, but every input's value is unique. and mentioned value in the error log is for the 1st selected checkbox.
What I want to achieve is, once a checkbox is clicked it should save it in the db, once the checkbox is unchecked, record should be removed from the database.
HTML:
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
#foreach ($counties as $county)
<li>
<input class="checkIt" type="checkbox" id="cnty_id" name="cnty_id"
value="{{ $county->id }}" #foreach($jct_fr_cnty as $jct) #if($jct->cnty_id == $county->id) checked #endif #endforeach>
{{ $county->county }}
</li>
#endforeach
Ajax:
$('.checkIt').bind('click', function() {
if($(this).is(":checked")) {
console.log("Checked");
$.ajax({
type: "POST",
url: '{{ url('company/assignment/interstate/cntys') }}',
data: $("#cntyselectform").serialize()
}).done(function( result ) {
console.log(result);
});
} else {
console.log("Unchecked");
$.ajax({
type: "DELETE",
url: '{{ url('company/assignment/interstate/cntysrem') }}',
data: $("#cntyselectform").serialize()
})
}
});
Controller
public function postcntyinterstate(Request $request)
{
jct_fr_cnty::create([
'cmp_id' => $request->cmp_id,
'cnty_id' => $request->cnty_id,
'svc_id' => $request->svc_id
]);
return response()->json(['success'=>'Data is successfully added']);
}
this is a code for toggle all button, which checks all the checkboxes and sends values to the db without any issue.
function toggle(source) {
checkboxes = document.getElementsByName('cnty_id');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
console.log("Checked");
$.ajax({
type: "POST",
url: '{{ url('company/assignment/interstate/cntys') }}',
data: $("#cntyselectform").serialize()
}).done(function(result) {
console.log(result);
});
}
}
form code:
<form id="cntyselectform" method="POST"
action="{{ route('company.cntyinterstate', ['company' => $company->id]) }}">
#csrf
<div class="col-lg-12 mb-3 mt-3 mb-sm-0">
<h3>Please select counties</h3>
<div name="cntSelect[]" id="cntSelect">
<ul>
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br />
#foreach ($counties as $county)
<li>
<input class="checkIt" type="checkbox" id="cnty_id" name="cnty_id"
value="{{ $county->id }}"
#foreach ($jct_fr_cnty as $jct) #if ($jct->cnty_id == $county->id) checked #endif #endforeach>
{{ $county->county }}
</li>
#endforeach
</ul>
</div>
<input type="hidden" value="{{ $company->id }}" name="cmp_id" id="cmp_id">
<input type="hidden" value="1" name="svc_id" id="svc_id">
{{-- <button id="cntyselect-button" type="submit" class="btn btn-primary">Submit</button> --}}
</div>
</form>
Database:

Answer 1

I understand the logic of. BUT it looks a little patchy. Let's fix it:
You absolutely should not have duplicate IDs. It may work, but it is semantically incorrect and you should not do it. (The id you specified in the loop in your code will be repeated in the document.) AND Get rid of unnecessary loops.
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
#php
$jct_fr_cnty_array = array_column($jct_fr_cnty->toArray(), 'cnty_id');
#endphp
#foreach ($counties as $county)
<li>
<input class="checkIt" type="checkbox" name="cnty_id"
value="{{ $county->id }}" #checked(in_array($county->id, $jct_fr_cnty_array))>
{{ $county->county }}
</li>
#endforeach
A few elements that could not be marked and triggered incorrectly due to repeated ids in the document and their values may have caused this error.
If you perform your deletion operation properly and if you provide correct checking/unchecking conditions in the relevant checkboxes, I think the error will be corrected when you apply this.