Как добавить onclick в documentQuerySelectorAll, активируя кнопку каждого элемента для управления каждым диапазоном элементов

Question

мой веб-сайт извлекает список элементов, и мне нужно контролировать каждый элемент, запускающий каждую кнопку, чтобы изменить текст каждого.

                    <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>

это всего лишь один элемент, мне нужно сделать это для более одного.

Я пытался сделать это с помощью этого кода:

    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}`
    }
})

, но это сработало только для первого элемента.

Answer 1

если у вас более одного элемента, не используйте идентификаторы, используйте классы

<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}`
    }