[FIXED] Django - i have add onclick function into html and whenever i click into different button then it will render the same data. how to fix that?

Issue

    <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);
   }

enter image description here enter image description here

Solution

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);
   }

Answered By - raphael