decrement and increment of a button using Jav

When my button is being clicked, it turns red. With that, the counter increases. However, I would like the counter to be dynamic. In such a way when the button is being deselected, the counter decreases too. However, I’m unable to do so. I did not receive any errors.

var buttons = document.getElementsByClassName("button");
var count = 0;
var disp = document.getElementById("display");
for (let i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    buttons[i].classList.toggle('active');
    if (this.classList.contains("active")) {
      if (!this.classList.contains("active")) {
        count--;
        disp.innerHTML = count;
      }
      count++;
      disp.innerHTML = count;
    }

  })
}
.active {
  background-color: #E68352 !important;
}

.button {
  background-color: #FFFFFF;
}
<input type="button" id="button1" class="button" value="A" />
<input type="button" id="button2" class="button" value="B" />
<input type="button" id="button3" class="button" value="C" />

<p>
  Button Clicked <span id="display">0</span> Times
</p>

Answer

you have to use else, your second if can’t never be reached the way you wrote this:

var buttons = document.getElementsByClassName("button");
var count = 0;
var disp = document.getElementById("display");
for (let i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    buttons[i].classList.toggle('active');
    if (this.classList.contains("active")) {
      count++;
    } else {
      count--;
    }
    disp.innerHTML = count;
  })
}
.active {
  background-color: #E68352 !important;
}

.button {
  background-color: #FFFFFF;
}
<input type="button" id="button1" class="button" value="A">
<input type="button" id="button2" class="button" value="B">
<input type="button" id="button3" class="button" value="C">

<p>
  Button Clicked <span id="display">0</span> Times
</p>