como estoy tratando de obtener la funcionalidad de hacer clic en un elemento del catálogo de productos, rellene ese elemento en las tablas de celdas fijas, digamos una tabla de 4 celdas, esto es para lograr el tipo de funcionalidad de hacer su caja con artículos variados, el problema es primero mostrando una tabla vacía de 4 celdas y luego completando las celdas una por una con el clic de un comprador. Lo que he logrado es poder seguir haciendo clic en los elementos y aparecerán en la parte superior sin ninguna estructura de tabla.

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

la plantilla anterior funciona, pero ahora si quiero eso, digamos que tengo una caja de 4 seleccionada por el comprador, entonces, la caja de 4 aparecerá vacía y luego al hacer clic en el artículo del catálogo de productos que aparece debajo de la tabla fija de 4 - la sesión mantendrá la información del producto en el que se hizo clic y cada vez que se llame a la plantilla anterior, se agregará un elemento a la sesión, por lo tanto, en el primer objeto de sesión de clic (b_data) tendrá un elemento y la tabla se completará con el primer elemento y el resto de las tres celdas estarán vacías en el objeto de la sesión del segundo clic (b_data) tendrá dos elementos y la tabla se completará con el primer y el segundo elemento y el resto de las dos celdas estarán vacías en la sesión del tercer clic tendrá tres elementos y la tabla se completará con el primer, segundo y tercer elemento y el resto de una celda estará vacía en el cuarto clic la sesión tendrá cuatro elementos y la tabla se completará con el primer, segundo, tercer y cuarto elemento y todos los las celdas se rellenarán en el la sesión de quinto clic tendrá cinco elementos, pero la tabla debería ajustarse y el quinto elemento debería sobrescribir el primer elemento de la tabla

el código anterior funciona, pero cómo lograr esta funcionalidad... por favor sugiera.