javascript executing both if else blocks

my Javascript function is executing both if else blocks. I want to add checkbox value in array if it is checked and remove value if its unchecked.

The output is inside if and inside else. But i want to run either if or else block.

Edit: I am generating dynamic label tags using php. I just shown one label tag in this example for understanding. But value of each input tag is assgined from database and is wrapped in label tag.

function filterbyprotype(current) {
  protypes = [];

  document.querySelectorAll('.filterprotypes').forEach(function(ele) {
    console.log(ele);
    if (ele.checked) {
      current.closest('label').style.background = "var(--headercolor)";
      current.closest('label').style.color = "#fff";


      protypes.push(ele.value);
      alert("inside if");

    } else {
      current.closest('label').style.background = "transparent";
      current.closest('label').style.color = "#000";


      delete protypes[ele.value];
      alert("inside else");

    }

  });

}

<label style="padding: 6px 15px;border: 1px solid grey;border-radius: 10px;margin-right: 16px;cursor: pointer;text-transform: capitalize;">
    <b><?=$filter_protype['protype']?></b>
    <input class="filterprotypes" type="checkbox" name="filter-protype[]" value="<?=$filter_protype['protype']?>" onchange="filterbyprotype(this)">
</label>

Answer

I just shown one label tag in this example for understanding

That was very unlucky, cause problem with your solution occurring only when there is more than 1 input element.

document.querySelectorAll('.filterprotypes').forEach(function(ele) { ... }

This line is problematic, cause logic inside it is triggered on all inputs every time you click any of them. Additionally this iteration is not needed at all, cause you already passing element to function (current).

Working solution after changes:

function filterbyprotype(current) {
  protypes = [];
  if (current.checked) {
    current.closest('label').style.background = "var(--headercolor)";
    current.closest('label').style.color = "#fff";
    protypes.push(current.value);
    alert("inside if");
  } else {
    current.closest('label').style.background = "transparent";
    current.closest('label').style.color = "#000";
    delete protypes[current.value];
    alert("inside else");
  }
}

<label style="padding: 6px 15px;border: 1px solid grey;border-radius: 10px;margin-right: 16px;cursor: pointer;text-transform: capitalize;">
    <b><?=$filter_protype['protype']?></b>
    <input class="filterprotypes" type="checkbox" name="filter-protype[]" value="<?=$filter_protype['protype']?>" onchange="filterbyprotype(this)">
</label>
<label style="padding: 6px 15px;border: 1px solid grey;border-radius: 10px;margin-right: 16px;cursor: pointer;text-transform: capitalize;">
    <b><?=$filter_protype['protype']?></b>
    <input class="filterprotypes" type="checkbox" name="filter-protype[]" value="<?=$filter_protype['protype']?>" onchange="filterbyprotype(this)">
</label>