getelementbyid for buttons


I have a products list that i am displaying in my page and for each product i have a button “add to cart”
and at the end of the page i have a button that if clicked i want to trigger auto click for the above buttons and add the products to cart in one click.


{% for product in theproducts %}

	<div class="col-lg-6">
		<video class="thumbnail" width="320" height="240" controls>
	  		<source src='{{product.video_demo}}' type="video/mp4">

		<div class="box-element product">

			{% if product.price > 0 %}

			   <button  id="product" data-product="{{}}" data-action="add" class="btn btn-outline-secondary add-btn update-cart">Add to Cart</button>

			{% else %}

				<a href= '{{product.video_file}}' download='{{}}'>
				<button  class="btn btn-outline-secondary add-btn">Download Video</button></a>

			{% endif %}		

			<h4 style="display: inline-block; float: right"><strong>AED{{product.price}}</strong></h4>


{% endfor %}

then i have the last button outside the loop so it is not repeated:

<div><input id="secondaryButton" type="button" name="savebutton" onclick="document.getElementById('product').click()" /></div>

what happened is that only the first button is clicked for the first product. I need all the buttons to be clicked.

How to acheive that?


Correct - the id attribute should be unique on a page, it’s not valid to have multiple elements on a page with the same id.

You’ve got a couple different options - you can use getElementsByClassName, or querySelectorAll for a more generalized solution. Or, if you want (need) to get really fancy, you can use the evaluate function on an XPath expression.

I used elementsbyclassname

cost collection = document.getElementByClassName('text');
for (let i = 0; i < collection.length; I++) {
    collection [I].click()