I am creating an admin page in flask using jinja2. Upon logging in the admin could see the various queries sent by user and based on it can take action. Using jinja template I have retrieved the data and along with the data included button also in the loop so that on each row with a query there will be corresponding button. Now I want to add some functionality to individual button, but i am not able to figure out how because after using “id” in loop will not produce unique id for each button which then throw’s error in javascript. Can anyone please help me with this.

This is my code. Html

<tbody class="table-group-divider">
        {% if query_data %}
            {% for row in query_data%}
                <tr>
                   <td>{{row[0]}}</td>
                   <td>{{row[1]}}</td>
                   <td>{{row[2]}}</td>
                   <td>{{row[3]}}</td>
                   <td>{{row[4]}}</td>
                   <td>{{row[5]}}</td>
                   <td id="query_status{{row[0]}}">Pending</td>
                   <td><button type="button" id="btnn" class="actionbtn">Resolve</button></td>
                </tr>
            {% endfor %}
        {% endif %}
    </tbody>

Javascript

document.getElementById('btnn').addEventListener('click' , function(){
    console.log("Hello")
})