Bootstrap modal not showing inside a for loop

Hello!

I want to attach a modal to all images. But for some reason the modal is not triggered and the entire page becomes un-clickable.

I have made sure that all modals triggers and modal have a unique ID without any results.

Can anyone see what I am doing wrong?


         {% for photo in user_photos %}
            <div class="image-container">
               <div class="image-wrapper" data-bs-toggle="modal" data-bs-target="#photoModal{{photo.id}}">
                  <img src="{{ photo.photo.url }}" alt="Användarbilder">
                  {% if request.user == photo.user %}
                     <form method = "POST">
                        {% csrf_token %}
                        <i class="bi bi-x-lg profile_delete_photo" title="Radera" data-photoId = "{{photo.pk}}" data-url = "{% url 'profilepage_app:deletePhotoAjax' %}"></i>
                     </form>
                  {% endif %}
               </div>
               <span>Uppladdat: {{ photo.timesince }}</span>
               
               <!-- Modal -->
               <div class="modal fade" id="photoModal{{photo.id}}" tabindex="-1" aria-labelledby="photoModallabel" aria-hidden="true">
                  <div class="modal-dialog">
                     <div class="modal-content">
                        <div class="modal-header">
                           <h1 class="modal-title fs-5" id="photoModal{{photo.id}}Label">Modal title</h1>
                           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                           ...
                        </div>
                        <div class="modal-footer">
                           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                           <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>

            </div>
         {% endfor %}

I also have this for loop and modal in another page, but it works fine.

{% for diary in user_diaries %}
                        <tr>
                            <td>
                                <!--Diary title-->
                                <a href="{{diary.get_absolute_url}}">{{diary.title|truncatechars:30}}</a>
                                {% if request.user == user %}
                                    <div>
                                        <!--Dropdown-->
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" fill="currentColor" class="dropdown-toggle bi bi-three-dots-vertical" viewBox="0 0 16 16">
                                            <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                        </svg>
            
                                        <!-- Dropdown options -->
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#updateModal{{ diary.id }}">Uppdatera</button>
                                            <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#deleteModal{{ diary.id }}">Radera</button>
                                        </div> 
                                        <!-- Diary update modal -->
                                        <div class="modal fade" id="updateModal{{ diary.id }}" tabindex="-1" aria-labelledby="updateModallabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content diarypage-update-modal">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-3" id="deleteModallabel">Uppdatera din dagbok</h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <form class="modal-body" method="POST">
                                                            {% csrf_token %}
                                                            <input type="hidden" name="diary_id" value="{{ diary.id }}">
                                                            {% for field in diary_update_form %}
                                                                <div class="bs-form-control">
                                                                    <label for="">{{field.label}}</label>
                                                                    <div>{{field}}</div>
                                                                </div>
                                                            {% endfor %}
                                                        <div class="modal-footer" id="diary-update-modal-footer">
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Ångra</button>
                                                            <button type="submit" class="btn btn-primary">Uppdatera</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        <!--Diary delete modal-->
                                        <div class="modal fade" id="deleteModal{{ diary.id }}" tabindex="-1" aria-labelledby="deleteModallabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content diarypage-modal-delete">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-3" id="deleteModallabel">{{diary.title}}</h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body fs-4 text-center">
                                                        Vill du radera denna dagbok?
                                                    </div>
                                                    <div class="modal-footer">
                                                        <form action="{% url 'profilepage_app:deletediary' pk=diary.id %}" method = "POST">
                                                            {% csrf_token %}
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Ångra</button>
                                                            <button type="submit" class="btn btn-primary">Radera</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}