Checkbox column works ONLY for the first page of table.

leas

I make a query via Ajax in my database and display the results in a table format(using the datatables plugin). I have a column with checkboxes. When a checkbox is checked the value stored in it, is added in an array along with the value of a hidden input field. The table has pagination and shows 10 rows at most. Everything works fine for the FIRST 10 ROWS. When I paginate to the next
10 rows and click a checkbox my code does not work. Below is the code and attached are two screenshots: One that shows that for the first 10 rows the code is working and one that shows the problem with the rest rows of the table.

$('#results').DataTable();

var t = $('#orderresults').DataTable();

var orderitems = [];

$("input[name='addunit']").click(function() {

console.log("click!")

//if ($("input:checkbox").prop('checked')) {
    var orderitem = new Object();
    orderitem.id = "";
    orderitem.period = "";

if(this.checked) {
    console.log("checked");

    var unit = $(this).val();
    var period = $("input[name='" + unit + "']").val();

    //console.log(unit);


    orderitem.id = unit;
    orderitem.period = period;

    // function unitDetails() {
    //  console.log(this.id + " " + this.period);
    // }

    // orderitem.logDetails = unitDetails;

    //orderitem.logDetails();

    orderitems.push(orderitem);

    //orderitems.push($(this).val());
    //orderitems.push($("input[name='" + unit + "']").val());
    var orderlength = orderitems.length;

    for (var i = 0; i < orderlength; i++) {
        //orderitems[i].logDetails();
        console.log(i + " " + orderitems[i].id + " " + orderitems[i].period);
    }
    //console.log(orderitems);

    //orderitems.forEach(function(entry) {
        //console.log(entry);
    //});

    t.row.add([
            orderitem.id,
            orderitem.period
        ]).draw(false);

    $("#submitOrder").removeClass("disabled");
    $("#submitOrder").removeAttr("disabled");

} else {
    console.log("unchecked");
    var unit = $(this).val();
    console.log(unit);

    var orderlength = orderitems.length;
    console.log(orderlength);

    for (var i = 0; i < orderlength; i++) {

        console.log(i + " " + orderitems[i].id + " " + orderitems[i].period);
        if(orderitems[i].id == unit){

            orderitems.splice(i, 1);
            break;
        }
    }

    var orderlengthnew = orderitems.length;
    console.log(orderlengthnew);

    for (var i = 0; i < orderlengthnew; i++) {
        console.log(i + " " + orderitems[i].id + " " + orderitems[i].period);
    }
}   

});