Как избежать того, чтобы несколько bootstrap offcanvas переопределяли друг друга?

Я создаю сайт с использованием django и хочу визуализировать модели django в html-шаблоне. Я запускаю цикл for, итерирующий модели, и создаю кнопку offcanvas для каждой. При выводе названия модели в разных offvanvas они перезаписывают друг друга. У меня есть две модели с названиями: 628671 и 801451, но независимо от того, на какую кнопку offcanvas я нажимаю, она одна и та же. Формат {{ data.title }} правильный, и я успешно выводил список моделей с заголовками, как на картинке_1(Модели с заголовками). Так что, похоже, есть проблема с переопределением offcanvas каждый раз, когда я отображаю кнопку в моем цикле.

HTML код: {% for data in emotion_data %} <-- это в html-файле, это django-tool.

                <div class="offcanvas-header">
                  <h5 class="offcanvas-title" id="offcanvasBottomLabel">{{ data.title}}</h5>
                  <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body large">
                  <div id="{{ data.title }}" class="chart" style="width: 100%; min-height: 500px;"></div>
                </div>
              </div>
                <td><a href="#">{{ data.title }}</a></td>
                <td>
                    <button type="button" id="{{ data.title }}" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottomLabel">
                        Vis graf
                      </button>
                </td>

Картинка_1:Модели с названием

Рисунок_2: Пример оффканваса

Вернуться на верх