Как добавить клик к списку товаров в html и получить товар, кликаемый в пожарном депо

Question

Я пытаюсь сделать простую корзину с использованием Django и Firebase Admin SDK, я запросил данные Firestore в списке и отобразил их в HTML, теперь я хочу добавить прослушиватель щелчков в список предметов и получить предмет, выбранный в коллекции Firestore, используя javascript. Теперь, когда я нажимаю на элемент, отличный от первого, ничего не происходит, то есть когда я нажимаю на первый элемент, отображаемый на странице, все работает нормально, а другой - нет.

python view.py для отображения элементов

def home(request):
    collection_ref = db.collection(u'products').get()
    documents = list(doc.to_dict() for doc in collection_ref)
    return render (request,'store/home.html',{'product':documents})

home. html

{% block content %}
   {% for doc in product %}
<div class="jumbotron">
<div class="col-sm-4">
<div class="card" >
 <div class="card-body">
<a href="#" class="img-prod"><img class="img-fluid" id="productUrl" src="{{doc.productImage}}"  alt="{{doc.productName}}">
 <h1 class="card-title" id="productName">{{doc.name}}</h1>
 <p class="card-subtitle mb-2 text-muted" id="productPrice">{{doc.price}}</p>
 <p class="card-text" id="productDescription">{{doc.description}}</p>
<button type="button" id="addtocart">Add to cart</button>
 </div>
 </div>
</div>
</div>
{% endfor %}
{% endblock content %} 

js код

 firebase.initializeApp(firebaseConfig);
      var db = firebase.firestore();
     var addToCart=document.getElementById('addtocart');

     addToCart.addEventListener('click', (event) =>{
     var image=document.getElementById('productUrl').src;
     var  productName = document.getElementById('productName').innerHTML;
     var productPrice=  document.getElementById('productPrice').innerHTML;
    db.collection("orders").add({
   pName: productName,
   price: productPrice,
   url:image
   })
   .then(function(docRef) {
  console.log("Document written with ID: ", docRef.id);
   })
   .catch(function(error) {
  console.error("Error adding document: ", error);
   });
                })

Answer 1

Вы всегда должны сохранять уникальность id во всем документе. findElementById возвращает только первый найденный элемент, поэтому вы добавляете слушателя в первый элемент списка только при запуске

var addToCart=document.getElementById('addtocart');
addToCart.addEventListener('click', (event) =>{...

. В вашем javascript должна быть определена функция add_to_cart, которая принимает параметры, а затем в вашем для l oop в html вы можете иметь что-то вроде

<button onclick="add_to_cart({{doc.name}},{{doc.price}})>Add to cart</button>"