CheckBox for all and for single does not work correctly

I am trying to make an array of listing using checkbox function, the function checks if the all checkbox is clicked then put all listings in the array, if it is clicked to uncheck it pulls all array values, and if a single listing is checked it adds to the array , and if its unchecked when its single or all listing values its value from the array is taken out. Yet on the first run if all selected i cant remove a single value by selecting one checkbox, and after all are checked and unchecked i cant add a single value into array by checking a single option.

$(".lstChk").on("click", function() {
if(this.id == "lstsAllChk" && this.checked){
    for(var lstIndex = 0; lstIndex < document.getElementsByClassName("lstChk").length; lstIndex++){
        var lstId = document.getElementsByClassName("lstChk")[lstIndex].id;
        $("#"+lstId).attr("checked", true);
        lstsToEdit.push(lstId);
    }
}
else if(this.id == "lstsAllChk" && !this.checked){
    for(var lstIndex = 0; lstIndex < document.getElementsByClassName("lstChk").length; lstIndex++){
        var lstId = document.getElementsByClassName("lstChk")[lstIndex].id;
        $("#"+lstId).attr("checked", false);
        var index = lstsToEdit.findIndex( function(value){ value == lstId;});
        lstsToEdit.splice(index, 1);
    }
}
else if(this.checked) lstsToEdit.push(this.id);
else {
    var index = lstsToEdit.findIndex( function(value){ value == this.id;});
    lstsToEdit.splice(index, 1);
}

if(lstsToEdit.length > 0) document.getElementById("lstEdit").style.display = "block";
else document.getElementById("lstEdit").style.display = "none";
console.log(lstsToEdit);

});