Select items with jquery that are generated by jinja2-CodePudding

I have this code inside a template that is being called as you will see in the image the items are correctly generated but when I try to get the text of the

tag it is always returning 'Heineken' which is the first item generated by the Jinja for loop.

All the items

<div  id="product-group" style="text-align: center; border: 2mm;">
    {% set path = './photos/' %}
    {% for row in product %}
    <a href="" id='clickable-product'  style="margin:0 auto !important;  margin-top: 5px !important; color: inherit; text-decoration: none;">
        <div  style="display:block;" id='product'>
            <img src="https://www.drinkstuff.com/productimg/118462_large.jpg" alt="Girl in a jacket" width="200" height="200">
            <p id="product-info" style="margin-right: 3px;">{{row[1]}}</p>
        </div>
    </a>
    {% endfor %}
</div>

<script>
    $(document).ready(function(){
        $("#product-group a").click(function(){
            alert($('#product-info').text());
        })

    })
</script>

So as said before it does not matter which figure I click on, it will alert the message 'Heineken'

CodePudding user response：

JQuery will select the first ID it finds in the DOM. Instead use:

$(document).ready(function(){
  $("#product-group a").click(function(){
    alert($(this).find("#product-info").text());
  })
})