Hi there I'm working on a functionality for checkbox selection limited for 4 checkbox in the list , so now I have filter hue-rotate in styling for 4 selected checkbox , now if I uncheck the anyone of selected and check different selection I should be able to view the left out color to be added over there.

 handleChange(){
    let checkboxes = this.template.querySelectorAll('.vehicleCheck');
    checkboxes.forEach((checkbox) => {
        checkbox.addEventListener('click', (e) => { 
            let checked = this.template.querySelectorAll('.vehicleCheck:checked');
           if( checked[1].length==1 ){
                checked.style.cssText=" filter: hue-rotate(0deg)";
            }else if (checked[2].length==1){  
                checked.style.cssText="filter: hue-rotate(50deg);";
            }else if (checked[3].length==1) {
                checked.style.cssText="filter: hue-rotate(89deg);";
            }else if (checked[4].length==1){
                checked.style.cssText="filter: hue-rotate(180deg) brightness(1.5);";
            }else if(checked.length >= 5){
                e.preventDefault();
                e.stopPropagation();
            }
        });
    });
}





<div class="trend-vehicles-container">
            <div class="trend-vehicles">
              <template for:each={summerizedArray} for:item="Fer">
                <div class="trend-each-vehicle" key={Fer.chassisIds}>
                  <input type="checkbox" value={Fer.chassisIds} id={Fer.chassisIds} onchange={handleChange} data-id="overview" class="vehicleCheck" /> 
                  <span style="font-size: 13px;">{Fer.chassisIds}</span>
                </div>
              </template>
            </div>
          </div>

Actual output

Expected