Как сделать кнопки во всех картах кликабельными?

Здравствуйте, я создал веб-приложение на Django. В этом приложении есть 6 карточек с кнопкой для увеличения и кнопкой для уменьшения количества еды для покупки. У меня проблема: работают только кнопки на первой карточке. Вот HTML код

 <div class="container">
    <div class="row">
        {% for roll in rolls %}
        <div class="col-4">
            <div class="card" style="width: 16rem;">
                <img src="{{ roll.immagine.url }}" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">{{ roll.nome }} Roll</h5>
                    <p class="card-text">€ {{ roll.prezzo }}</p>
                    <button id="incrementBtn" style="border-radius: 8px; background-color:orange;">+</button>
                    <span id="counter">0</span>
                    <button id="decrementBtn" style="border-radius: 8px; background-color: lightsalmon;">-</button>
                    <a href="{% url 'ordina' %}" class="btn btn-primary">Acquista</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

Вот код Javascript:

    document.addEventListener("DOMContentLoaded", function() {
    let idCounter = "counter1, counter2, counter3, counter4, counter5, counter6";
    let arrIdCounter = idCounter.split(", ");
    console.log(arrIdCounter);
    let valueCounter = document.getElementById('counter').innerHTML;

   const incrementBtn = document.getElementById('incrementBtn');
   const decrementBtn = document.getElementById('decrementBtn');



   incrementBtn.addEventListener('click', () => {
         console.log(valueCounter);
         valueCounter++;
         document.getElementById('counter').innerHTML = valueCounter;
         console.log(valueCounter);
   });

   decrementBtn.addEventListener('click', () => {
         if (valueCounter > 0) 
         {
             valueCounter--;
         }
         document.getElementById('counter').innerHTML = valueCounter;
  });
});

При рендеринге файла у вас получится что-то вроде:

<div class="col-4">
    <div class="card" style="width: 16rem;">
        ...
            <button id="incrementBtn" ...>+</button>
            ...
            <button id="decrementBtn" ...>-</button>
        ...
    </div>
</div>
<div class="col-4">
    <div class="card" style="width: 16rem;">
        ...
            <button id="incrementBtn" ...>+</button>
            ...
            <button id="decrementBtn" ...>-</button>
        ...
    </div>
</div>
<div class="col-4">
    <div class="card" style="width: 16rem;">
        ...
            <button id="incrementBtn" ...>+</button>
            ...
            <button id="decrementBtn" ...>-</button>
        ...
    </div>
</div>

Как ваш скрипт может узнать, какой элемент принимать? Вы не можете иметь более одного html-элемента с одинаковым id, они должны быть уникальными. Для этого вы можете изменить идентификаторы кнопок на:

<button id="incrementBtn_{{ poll.id }}" style="border-radius: 8px; background-color:orange;">+</button>

И ваша переменная в массив:

const incrementBtn = document.querySelectorAll('[id^="incrementBtn"]');

Но тогда, конечно, вы должны использовать его в цикле.

Вернуться на верх