Как создать складные карты в бутстрапе в шаблоне django?

У меня есть таблица этих складных карточек с динамическим содержимым. Код, который я взял из начальная загрузка, выглядит так:

<p>
  <a class = "btn btn-primary" data-toggle = "collapse" href = "#multiCollapseExample1" role = "button" aria-expanded = "false" aria-controls = "multiCollapseExample1">Toggle first element</a>
  <button class = "btn btn-primary" type = "button" data-toggle = "collapse" data-target = "#multiCollapseExample2" aria-expanded = "false" aria-controls = "multiCollapseExample2">Toggle second element</button>
  <button class = "btn btn-primary" type = "button" data-toggle = "collapse" data-target = ".multi-collapse" aria-expanded = "false" aria-controls = "multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class = "row">
  <div class = "col">
    <div class = "collapse multi-collapse" id = "multiCollapseExample1">
      <div class = "card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class = "col">
    <div class = "collapse multi-collapse" id = "multiCollapseExample2">
      <div class = "card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Проблема

Но как видите, каждый коллапс управляется этим атрибутом multiCollapseExample1. В моем шаблоне django, когда я использую это, при нажатии любой кнопки закрытия только первая карта сворачивается, потому что она имеет статическое значение 1. Как я могу дать ему динамическое значение, чтобы каждая карта открывалась и закрывалась правильно? Причина, по которой я спрашиваю, заключается в том, что мой код довольно сложен и возвращает около 10+ параметров из функции views.py, и я повторяю словарь словарей, чтобы напечатать все значения в нужном мне формате. По этой причине у меня есть около 4-5 вложенных циклов for, а также оператор if, который проверяет, совпадает ли счетчик цикла if со счетчиком родительского цикла. Я не могу понять, как я могу просто решить эту проблему.

Это мой фактический полный код:

<table class = "table mb-0 table-striped loadingplan">
            <thead>
            <tr>
                <th>ID</th>
                <th>Vehicles</th>
                <th>Gross Weight</th>
                <th>Route</th>
                <th>Route Distance</th>
                <th>Route TAT</th>
                <th>ETD</th>
                <th>ETA</th>
                <th></th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            {% for d,t,r,y,w,f in open_route_info %}
                {% for k,v in open_trucks.items %}
                    {% if forloop.counter == forloop.parentloop.counter %}
                        <td class = "align-middle">YNT1151<br>
                            <small class = "align-right">{{ f }}% Filled</small>
                        </td>
                        <td>
                            {% for x in v %}
                                {% for y,z in x.items %}
                                    {{ y.display_name }}
                                {% endfor %}
                            {% endfor %}
                        </td>

                        {% for truck,value in v.items %}
                            <td class = "align-middle">{{ truck }} {{ value }}<br>o
                                <a href = "#">
                                    <small>Download Loading Plan {{ value.pk }}</small>
                                </a>
                            </td>
                        {% endfor %}

                        <td class = "align-middle">{{ w }}KG</td>
                        <td class = "align-middle">{{ k }}</td>
                        <td class = "align-middle">{{ d }} KM</td>
                        <td class = "align-middle">{{ t }}</td>
                        <td class = "align-middle">{{ y }}</td>
                        <td class = "align-middle">{{ scheduled_date }}</td>
                        <td class = "align-middle">
                            <button class = "btn" type = "button" data-toggle = "collapse"
                                    data-target = "#multiCollapseExample2" aria-expanded = "false"
                                    aria-controls = "multiCollapseExample2"><img
                                    src = "{% static 'img/cardopen.svg' %}" alt = "card open"></button>
                        </td>
                        <td class = "align-middle"><a href = "#" class = "btn btn-primary">Raise RFQ</a>
                        </td>
                        <tr class = "collapse multi-collapse" id = "multiCollapseExample2">
                            <td colspan = "5">


                                <table class = "table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>SKU ID</th>
                                        <th>SKU Name</th>
                                        <th>Quantity</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    {% for x in v %}
                                        {% for y,z in x.items %}
                                            {% for w in z %}
                                                <tr>

                                                    <td>{{ w.name }}</td>
                                                    <td>{{ w.pid }}</td>
                                                    <td>{{ w.quantity }}</td>

                                                </tr>
                                            {% endfor %}

                                        {% endfor %}
                                    {% endfor %}

                                    </tbody>
                                </table>


                            </td>
                            <td colspan = "5" class = "align-middle">
                                <div class = "card card-body iframecard">

                                    <iframe src = "{{ r }}"></iframe>


                                </div>
                            </td>
                        </tr>

                    {% endif %}
                {% endfor %}
            {% endfor %}


            </tbody>
        </table>

Что я хочу

Все, что я хочу сделать, это заменить multiCollapseExample2 динамической переменной той же длины, что и количество элементов. Я попытался использовать простой цикл для списка, длина которого равна количеству элементов, но это не сработало, вероятно, из-за оператора if {% if forloop.counter == forloop.parentloop.counter %}.