Collapse Bootstrap не видит target если id ="{{ jinja }}"

Через цикл for создаю элементы card с наполнением из DB которые должны сворачиваться т.к. содержимое {{ el.story_text }} очень большое. В качестве id элемента пытаюсь указать {{ el.data }}, она уникальная, но даже если использую {{ el.id }} из db ситуация не меняется, data-bs-target не видит нужный элемент. Если заменить {{ el.data }} в id на статический id (например "element_id"), то collapse работает, но сразу для всех созданных card.

{% extends "main/base.html" %}

{% block title %}
    test
{% endblock %}

{% block content %}
<h1>История</h1>
    {% if story %}
        {% for el in story %}
            <p>
              <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#{{ el.date }}" aria-expanded="false" aria-controls="{{ el.date }}">
                {{ el.date }}
              </button>
            </p>
            <div class="collapse" id="{{ el.date }}">
              <div class="card card-body">
                {{ el.story_text }}
              </div>
            </div>
        {% endfor %}
    {% else %}
        <p>У нас нет записей!</p>
    {% endif %}
{% endblock %}

P.S.: Код работал при более старой версии Bootstrap, но может я что-то упустил и теперь не замечаю(( help pls!!

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