Показать пустую таблицу с фиксированными ячейками в шаблоне django, а затем заполнить ее элементами сессии ячейка за ячейкой

Пока я пытаюсь добиться того, чтобы при нажатии на элемент из каталога товаров, этот элемент заполнялся в фиксированных ячейках таблицы, скажем, в таблице из 4 ячеек - это нужно для того, чтобы добиться функциональности типа "сделай сам" с ассортиментом товаров. Проблема заключается в том, чтобы сначала показать пустую таблицу из 4 ячеек, а затем заполнять ячейки по очереди по щелчку покупателя. То, чего я достиг, это возможность продолжать щелкать по товарам, и они будут появляться вверху без какой-либо структуры таблицы.

{% for product_id, item in b_data.items %}
    {% for i in item.numItems %}
        <div class="col-md-4 mb-4">
            <div class="card" style="width: 18rem;">
                <img src="/media/{{item.image}}" class="card-img-top" alt="...">
                <div class="card-body">
                <h5 class="card-title">{{item.title}}</h5>
                <p class="card-text">{{product_id}} {{item.qty}}</p>
                <div class="card-footer">
                    <a href="#" class="btn btn-primary"><i class="bi bi-cart2"></i></a>
                </div>
                </div>
            </div>
        </div>
    {% endfor %}
{% endfor %}

Вышеуказанный шаблон работает, но теперь, если я хочу, чтобы - скажем, у меня есть коробка из 4, выбранная покупателем, тогда - коробка из 4 появится пустой, а затем при щелчке по товару из каталога товаров, появляющегося ниже фиксированной таблицы из 4 - сессия будет хранить информацию о щелкнутом товаре и каждый раз, когда вызывается вышеуказанный шаблон, в сессию будет добавляться один товар, таким образом... при первом клике объект сессии (b_data) будет иметь один элемент и таблица будет заполнена первым элементом, а остальные три ячейки будут пустыми при втором клике объект сессии (b_data) будет иметь два элемента, таблица будет заполнена первым и вторым элементами, а остальные две ячейки будут пустыми в третьем сеансе щелчка будет три элемента, таблица будет заполнена первым, вторым и третьим элементами, а остальные ячейки будут пустыми на четвертом сеансе щелчка будет четыре элемента, таблица будет заполнена первым, вторым, третьим и четвертым элементами, а все ячейки будут заполнены на пятом сеансе будет пять элементов, но таблица должна обернуться вокруг, и первый элемент в таблице будет перезаписан пятым элементом

приведенный выше код работает, но как достичь этой функциональности.... пожалуйста, подскажите.

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