Независимое прибавление/уменьшение значения при нажатии на кнопки, для нескольких карточек
Подскажите, пожалуйста, как сделать так, чтобы имея несколько карточек, при нажатии на "+" или "-" менялось значение <input>, но на каждой карточке кнопка отвечала бы за свой <input>?
Я написал код, чтобы на одной карточке это работало, но если перебирать, то будет работать для всех <input>.
let plus = document.querySelector("#plus");
let minus = document.querySelector("#minus");
let input = document.querySelector("#count");
plus.addEventListener("click", function() {
input.value++;
input.innerHTML = input.value;
});
minus.addEventListener("click", function() {
input.value--;
input.innerHTML = input.value;
});<button class="counter-button" id="minus">-</button>
<input class="counter-input" id="count" type="text" value="1">
<button class="counter-button" id="plus">+</button>В общем, я не знаю, что изучить для этого или как дальше действовать. Решение ищу на JS. Спасибо.