how to display image onclick inside a jinja loop?

Question

I'm quietly new to jinja and need to parse the "attachment" variable inside the loop to the rendered partial HTML template on clicking the attachment name.

the partial page includes the dive HTML to display this attachment using img tag. and the attachment variable includes the file name.

profile.html

<div class="tab-pane fade" id="attachment-tab-pane" role="tabpanel" aria-labelledby="attachment-tab" tabindex="0">
    <a class="btn" role="button" id="btn-add-attachment" data-bs-toggle="modal" data-bs-target="#upload-attachment-modal">+ Add Attachment</a>
    <div id="attachments" class="p-4">
        <div class="row gx-3">
            {% for attachment in attachments %}
                <div class="col-12 col-lg-6">
                    <div class="d-flex justify-content-between attachment-item">
                            <div class="start"><i class="fas fa-file-alt me-3"></i>
<span type="button" class="popos_img" id="button_{{attachment}}">{{attachment}}</span></div>
                        <div class="end"><i class="fas fa-eye me-2"></i>
                            <i class="fas fa-trash me-2"></i><i class="fas fa-cloud-download-alt"></i></div>           
                    </div>
                </div>
<!-- Modal -->
<div hidden class="modal fade"
    id="view_attachment_modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true" style="text-align: center;">

    <div class="modal-dialog" role="document" style="margin: auto;text-align: center;">
        <div class="modal-content" style="display:table;text-align: center;">

            <!-- Add image inside the body of modal -->
            <div class="modal-body" style="text-align: center;">
                <img id="image" src="/assets/img/{{attachment}}" alt="Click an attachment" />
            </div>

            <div class="modal-footer">
                <button type="button"
                    class="btn btn-secondary"
                    data-dismiss="modal">
                    Close
            </button>
            </div>
        </div>
    </div>
</div>
            {% endfor %}
        </div>
    </div>
</div>

what's happening is only one attachment keeps displaying on click across all attachments.

What I do expect is when clicking any attachment name It shows up.

I am sure there's something missing. Thanks in advance

EDIT

I tried this JQuery Snippet but it didn't work, what's wrong with it?

<script type="text/javascript">
    $(document).ready(function() {          
        $('.button').each(function(){
            $(this).click(function(){
                $('#view_attachment_modal'+$(this).attr('attachment')).toggle();
            });
        });
    });
</script>

Answer 1

Okay so as @MatsLindh's comment said, it solved my case. There's no need for javascript or Jquery here, as creating unique modals on a length of the array has solved this issue. Which make perfect sense.

So the code should be like this:

{% for attachment in attachments %}
    <div class="col-12 col-lg-6">                        
        <div class="d-flex justify-content-between attachment-item">
            <div class="start"><i class="fas fa-file-alt me-3"></i><a class="btn" role="button" data-bs-toggle="modal" data-bs-target="#view-attachment-{{attachment.id}}"><span>{{attachment.attachment}}</span></a></div>

        </div>
    </div>  
<!-- Modal -->
<div class="modal fade"
    id="view-attachment-{{attachment.id}}"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered" role="document" style="position: relative;display: table;overflow-y: auto;overflow-x: auto;width: auto;min-width: 300px;max-width: 80%;">
        <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{attachment}}</h5>
          </button>
        </div>
            <!-- Add image inside the body of modal -->
            
            <div class="modal-body">
                <img id="image" src="/assets/img/{{name}}_Attachments/{{attachment}}" alt="Click an attachment" style="max-width: 100%;"/>
            </div>

            <div class="modal-footer">
                <button type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal">
                    Close
            </button>
            </div>
        </div>
    </div>
</div> 
                                
{% endfor %}