FreeCodeCamp/HelpFrontEnd

hi,

• I am using kendo grid.
• in my grid there are so many columns, if i change the value in one checkbox its affecting the first column Checkbox.
• can you guys tell me how to fix it.
• providing my code below.
• I debugged and found out, happening due to this line dataItem.set('checkedOutUserId', ""); in the below method.
• whole code I am pasting in gist since the file is big, rlevant code alone I am putting it below

https://gist.github.com/niniyzni/db26769b82d1759f0acee2b0732ac5cc

$('#kgrid').on('click', '#foulFlagCheck', function () {
    that.isSaveDisableGrid = false;

    var checked = $(this).is(':checked');
    let grid = that.gridkendo.getGrid();
    var dataItem = grid.dataItem($(this).closest('tr'));
    dataItem.dirty = true;
    dataItem.set("dirty", true);
   //dataItem.set('checkedOutUserId', "");
   dataItem.checkedOutUserId = null;

    grid.lockedTable.find("tr[data-uid='" + dataItem.uid + "'] td #foulFlagCheck").attr('checked', checked);
    grid.table.find("tr[data-uid='" + dataItem.uid + "'] td #foulFlagCheck").attr('checked', checked);
    dataItem.operationType = "Update";
    if (checked) {
        dataItem.isDataUpdated = true;
        dataItem.foul = "Y";
    }
    else {
        dataItem.isDataUpdated = false;
        dataItem.foul = "N";
    }

    if (!(dataItem.updateflag != undefined && dataItem.updateflag == true)) {

        dataItem.updateflag = true;
        //that.totalUpdates++;

    }
    that.countingUpdates();

});

{
    field: "foul", title: "foul", editable: true, width: 65, aggregates: ["count"], groupHeaderTemplate: "foul: #= value # (#= count# item(s))",
    //filterable: that.gridkendo.getAutoFilter("contains"),
    template: function foulFunc(foul) {
        return that.foulCheckBox(foul, that);
    },
    filterable: false,
    attributes: {
        class: "#: (checkedOutUserId !== undefined && checkedOutUserId !== null && checkedOutUserId !== '') ? 'rowDisabled' : ''#"
    }
},


private foulCheckBox(type: any, that: any) {
    let value;
    if (type.foul == "N" || type.foul == null || type.foul == undefined || type.foul == " " || type.foul == "") {
        value = '<input type="checkbox" id ="foulFlagCheck"  class="checkBox" />';
    } else if (type.foul == "Y") {
        value = '<input type="checkbox" id ="foulFlagCheck" checked="checked" class="checkBox" />';
    }
    return value;
}