JQuery how to do AJAX call when checkbox is clicked and send its state?

I want to make an AJAX call when the user clicks on a checkbox. The call sends an id along with the checkbox state. Right now when I click my checkbox it creates two AJAX calls, one with the first id in the list and one is correct one I clicked.

How can I send one ajax call of the checkbox I clicked?

HTML:

   <tr class="test-row" data-customerid="1000">
 <td data-content="Customer ID" class="" style="max-width:700px">1000</td>
 <td class="toggle-checkbox" data-content="">
   <div class="custom-control custom-switch no-click">
     <input type="checkbox" checked="checked" class="custom-control-input toggle-checkbox" id="">
     <label class="custom-control-label" for="">&nbsp;</label>
   </div>
 </td>

I have hundreds of rows with customer id 1000, 1001, 1002 etc.
Right now the AJAX call is always 1000 and an ajax call with the customer id I clicked.
Lets say I click the checkbox on row with customer id 1005 then the AJAX call right now is:

testurl&cid=1000&checkbox=1
testurl&cid=1005&checkbox=1

JQuery:

$document.on('change', '.toggle-checkbox', function () {
    var $this = $(this);
    var customerid= $row.data('customerid');
    var checkState = '';

 if($(this).is(':checked')) {
     checkState = 1;
 }
 else {
     checkState = 0;
 }



$.ajax({
    url: base_url + "testurl",
    type: "GET",
    data: {cid: customerid, checkbox: checkState},
    success: function (result) {
        console.log('succesful change');
    },
    error: function (xhr, status, error) {
        console.log('unsuccesful change');
    }
});

});