In my django project I use bootstrap modal and I can’t display my information in a cycle for each object, what’s the reason?

Question

Django

I have a table with certain data, but they all do not fit and add. information is displayed using the bootstrap modal.
The database has an object with different fields, all of them are output in a for loop for each object.

<div class="table-responsive">
       <table class="table table-borderless" style="background: #F9F9F9; vertical-align:center;">
             <thead class="table" style="border-bottom: solid 2px #C4C4C4; height: 50px;">
                   <tr>
                   <th scope="col" style="color: #666970; font-weight:300; font-size: 18px;">Город</th>
                   <th scope="col" style="color: #666970; font-weight:300; font-size: 18px;">Логотип</th>
                   <th scope="col" style="color: #666970; font-weight:300; font-size: 18px;">Торговая марка</th>
                   <th scope="col" style="color: #666970; font-weight:300; font-size: 18px;">Необходимая площадь
                   </th>
                   <th scope="col" style="max-width:140px; color: #666970; font-weight:300; font-size: 18px;">Вид деятельности
                    </th>
                    </tr>
                    </thead>
                    <tbody class="table">
                    {% for arendator in arendators%}
                    <tr>
                        <td data-bs-toggle="modal" data-bs-target="#staticBackdrop"
                            style="font-size 15px; color:#000000; ">{{arendator.city}}
                        </td>
                        <td style="font-size 15px; color:#000000;">{% if arendator.logo %}
                            <img src="{{ arendator.logo.url }}" width="100px">
                            {% else %}
                            -
                            {%endif%}
                        </td>
                        <td style="font-size 15px; color:#000000;">{{arendator.name}}</td>
                        <td style="font-size 15px; color:#000000;">{{arendator.square}}</td>
                        <td style="max-width:160px; font-size 15px; color:#000000;">{{arendator.kind_of_activity}}</td>
                    </tr>


                    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="true"
                         tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="staticBackdropLabel">Дополнительные требования</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    {{arendator.requirements}}
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Закрыть
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </table>
            </div>

But for some reason, in the additional modal requirements for each object, information is displayed not of its own object, but only of the first one. I can't figure out why, please help

Answer 1

Identifiers must be unique. Instead of displaying the markup of the modal window for each element, you need to display the markup once and write a js code that will substitute the necessary data into the model window before it is shown.