as I am trying to get the functionality of clicking an item from product catalogue populate that item at the fixed cells tables say a table of 4 cells - this is to achieve make-your-box kind of functionality with assorted items - the problem is first showing empty table of 4 cells and then populating the cells one by one on the click by a buyer. What I have achieved is to be able to keep clicking the items and they will appear at the top without any table structure.

{% 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 %}

above template works but now if I want that - say i have a box of 4 selected by buyer then - box of 4 will appear empty and then on the click of item fro the product-catalogue appearing below the fixed table of 4 - the session will keep the information of the clicked product and each time the above template is called it'll have one item added to the session so - on the first click session object (b_data) will have one item and the table will be populated with first item and rest of the three cells will be empty on the second click session object (b_data) will have two items and the table will be populated with first and second item and rest of the two cells will be empty on the third click session will have three items and the table will be populated with first, second and third item and rest of the one cell will be empty on the fourth click session will have four items and the table will be populated with first, second, third and fourth item and all the cells will be populated on the fifth click session will have five items but the table should wrap around and the first item in the table should get overwritten by fifth item

the above code works but how to achive this functionality.... please suggest.