<div class="home-food-row">
{% if allmenu %} {% for menu in allmenu %}
<div class="home-food-menu-col">
<div class="filterDiv breakfast">
<div class="img-price-tag">
<div class="price-tag" id="price">{{menu.price}} only</div>
<img class="home-page-food-img" src="{{menu.food_img.url}}" alt="Food" width="100%"/>
</div>
<h1 id="foodName_1">{{menu.food_name}}</h1>
<p>{{menu.food_description}}</p>
<button id="order" onclick="myFunction()">Place Order</button>
</div>
</div>
{% endfor %} {% else %}
<div class="col-md-12">
<p>No Food</p>
</div>
{% endif %}
</div>
/////////////////////////// JS Code ////////////////////////////
function myFunction() {
var price = document.getElementById("price");
var food = document.getElementById("foodName_1");
console.log(food);
console.log(price);
}
Reason: all your menus have the same id. You can use the id of the menu to give each one a unique id, by appending {{ menu.id }} to the id attribute in your html.
<div class="home-food-row">
<strike> {% if allmenu %} {% for menu in allmenu %} <strike>
<div class="home-food-menu-col">
<div class="filterDiv breakfast">
<div class="img-price-tag">
<div class="price-tag" id="price{{ menu.id }}">{{menu.price}} only</div>
<img class="home-page-food-img" src="{{menu.food_img.url}}" alt="Food" width="100%"/>
</div>
<h1 id="foodName_1{{ menu.id }}">{{menu.food_name}}</h1>
<p>{{menu.food_description}}</p>
<button id="order" onclick="myFunction('{{ menu.id }}')">Place Order</button>
</div>
</div>
<strike>{% endfor %} {% else %}<strike>
<div class="col-md-12">
<p>No Food</p>
</div>
<strike> {% endif %}<strike>
</div>
Then you can target these individually in your javascript like this:
function myFunction(id) {
var price = document.getElementById("price" + id);
var food = document.getElementById("foodName_1" + id);
console.log(food);
console.log(price);
}