if you have more than one elment, dont use ids, use classes

<div class="col-md-2 plusButton">
  <button class="minus_1 countMinus"><i class="fa fa-angle-left"></i></button>
  <span class="counter-num_1 counter">1</span>
  <button class="plus_1 countPlus"><i class="fa fa-angle-right"></i></button>
</div>

document.querySelectorAll('.plusButton').forEach(function (el) {
    let counter = el.querySelector('.counter')
    el.querySelector('.countPlus').onclick = () => {
        let increment = parseInt(counter.innerHTML) + 1
        counter.innerHTML = `${increment}`
    }
    el.querySelector('.countMinus').onclick = () => {
        let decrement = parseInt(counter.innerHTML) - 1
        counter.innerHTML = `${decrement}`
    }

my Website retrieves a list of elements, and I need to control each one element firing each button to change the text of each.

                    <div id="plusButton"class="col-md-2">
                       <button id="countMinus" class="minus_1"><i class="fa fa-angle-left"></i></button>
                       <span id="counter" class="counter-num_1">1</span>
                       <button id="countPlus" class="plus_1"><i class="fa fa-angle-right"></i></button>
                    </div>

this is just one element, I need to do this for more then only one.

I tried to do this with this code:

    document.querySelectorAll('#plusButton').forEach(function () {
    let counter = self.document.getElementById('counter')
    self.document.getElementById('countPlus').onclick = ()=>{
        let increment = parseInt(counter.innerHTML) + 1
        counter.innerHTML = `${increment}`
    }
    self.document.getElementById('countMinus').onclick = ()=>{
        let decrement = parseInt(counter.innerHTML) - 1
        counter.innerHTML = `${decrement}`
    }
})

but it only worked for the first element.