jinja2 forLoop_no iteration in delete modal

Question

I'm trying to build an app with Python Flask and connection with a MongoDB database. I have never worked with HTML/Jinja2, and I am finding some peculiar problem.

So, I want to display the list of my documents in a web page, show some document properties and have the possibility to delete the document.

Everything works fine, but for some reason the modal of the delete refer always to the first element of the list.

Here is the code of my html page:

<table class="table table-sm table-striped">
<thead class="text-center">
    <tr>
        <th>State</th>
        <th>Name</th>
        <th>Version</th>
        <th>Description</th>
        <th>Last Update</th>
        <th>Delete</th>
        <th>View</th>
        <th>Clone</th>
    </tr>
</thead>

<tbody>
    {% for doc in docs %}
    <tr>
        <td class="text-center"><a href="./done?_id={{ doc['_id'] }}"><input type="image"
            src="static/images/recipe.png" width="30"></a></td>

        
        <td class="text-center"><font size ="8"><em>{{ doc["clientId"] }}</em></font></td>

        <td class="text-center"><strong>{{ doc["version"] }}</strong></td>

        <td class="text-center"><strong>{{ doc["description"] }}</strong></td>

        <td class="text-center"><strong>{{ doc["lastUpdate"] }}</strong></td>

        <td class="text-center"><img src="{{ url_for('static',filename='images/trash.png') }}" , width="30" data-toggle="modal"
            data-target="#exampleModal" ) />{{ doc["_id"] }}</td>

        <td class="text-center"><a href="./showRec?_id={{ doc['_id'] }}" target="_blank">
            <img src="{{ url_for('static',filename='images/view_n.png') }}" , width="30" ) /></a>
            
            </td>


        <td class="text-center"><a href="./cloneRec?_id={{ doc['_id'] }}">
            <img src="{{ url_for('static',filename='images/edit.png') }}" , width="30" ) /></a>
            
            </td>

            **<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Delete action</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div> 
                        <div class="modal-body">
                            Delete {{ doc["_id"] }} ?
                        </div>
                        <div class="modal-footer">
                            <a href="./delete?_id={{ doc['_id'] }}"><button type="button"
                                    class="btn btn-danger">OK</button></a>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
    {% endfor %}**
    </tr>
</tbody>

I am sure that the forLoop works fine outside the modal, but I don't get why it doesn't work inside of it.

Is there anyone who can helps

Answer 1

I have found a solution. data-target should include the target ID, that should also reported in the modal ID. So the table element should be:

<td class="text-center"><img src="{{ url_for('static',filename='images/trash.png') }}" , width="30" data-toggle="modal"
            data-target="#Arr{{doc['_id']}}" ) /></td>

while the modal should report:

<div class="modal fade" id="Arr{{doc['_id']}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">....

My question was the same as this one(Modal window in Jinja2 template. Flask), I am sorry to have posted it again.