Получил массив карточек товара cards их 4 штуки, далее в цикле решил их взять за условие, чтобы кнопки добавления/удаления количества товара отталкивались от этого значения, потому что их тоже 4 штуки по одной в каждом cards. Но почему-то работает только нулевая кнопка в первой карточке, а все остальные просто не рабочие. В консоли тоже ничего не выводится. Может я что-то не понимаю? Объясните пожалуйста.
let cards = document.querySelectorAll('.product_card');
let btnAdd = document.querySelectorAll('.card_button_plus');
let btnRemove = document.querySelectorAll('.card_button_minus');
let input = document.querySelectorAll('.card_input');
let index = 0;
let count = 2;
for(index; index < cards.length; index++){
btnAdd[index].addEventListener('click', () =>{
input[index].value = count++;
});
btnRemove[index].addEventListener('click', removeNum);
}
console.log(cards);
HTML код<div class="product_card">
<div class="product_count">
<button class='card_button_minus card_buttons'>-</button>
<form action="#">
<input type="number" class='card_input' min='1' max='99' step='1' value='1'>
</form>
<button class='card_button_plus card_buttons'>+</button>
</div>
</div>
<div class="product_card">
<div class="product_count">
<button class='card_button_minus card_buttons'>-</button>
<form action="#">
<input type="number" class='card_input' min='1' max='99' step='1' value='1'>
</form>
<button class='card_button_plus card_buttons'>+</button>
</div>
</div>
<div class="product_card">
<div class="product_count">
<button class='card_button_minus card_buttons'>-</button>
<form action="#">
<input type="number" class='card_input' min='1' max='99' step='1' value='1'>
</form>
<button class='card_button_plus card_buttons'>+</button>
</div>
</div>
<div class="product_card">
<div class="product_count">
<button class='card_button_minus card_buttons'>-</button>
<form action="#">
<input type="number" class='card_input' min='1' max='99' step='1' value='1'>
</form>
<button class='card_button_plus card_buttons'>+</button>
</div>
</div>
