Target multiple classes in a div and count number of times they have been clicked Vanilla JS

The purpose of this is to be able to track the number of times a button with class testButton or incButton has been clicked and if either has been clicked twice to show a overlay.

There are 2 main issues:
1: I’m not sure how to select 2 different classes of buttons
2: Once there are more than 1 button with the same class name the existing JS code does only works on the first button with the testButton class.

The code I have is:

<style>
    #winOverlay {
        position: fixed;
        z-index: 200;
        width: 100%;
        height: 100%;
        background-color: red;
        top: 0;
        left: 0;
    }
</style>

<div id="winOverlay" style="display:none"></div>

<div id="buttonContainer">
    <button class="testButton">1</button>
    <button class="incButton">2</button>
    <button class="testButton">3</button>
    <button class="incButton">4</button>
    <button class="testButton">5</button>
</div>


<script>
    var count = 0;
    var btn = document.getElementById("buttonContainer").querySelector(".testButton");

    btn.onclick = function () {
        count++;
        if (count == 2) {
            document.getElementById('winOverlay').style.display = "block";
        }
    }
</script>

Any help would be greatly appreciated.

>Solution :

You can make use of event Delegation where you add event listener on the common parent container with class buttonContainer and you can check if the button clicked with id only testButton and incButon

var count = 0;
var btn = document.getElementById("buttonContainer");
const winOverlay = document.getElementById('winOverlay');

btn.addEventListener("click", e => {
  const classes = e.target.classList;
  if (classes.contains("testButton") || classes.contains("incButon")) {
    count++;
    if (count === 2) winOverlay.style.display = "block";
  }
})

#winOverlay {
  position: fixed;
  z-index: 200;
  width: 100%;
  height: 100%;
  background-color: red;
  top: 0;
  left: 0;
}

<div id="winOverlay" style="display:none"></div>

<div id="buttonContainer">
  <button class="testButton">1</button>
  <button class="incButon">2</button>
  <button class="testButton">3</button>
  <button class="incButon">4</button>
  <button class="testButton">5</button>
</div>