Как отобразить в модальном окне форму корзины?

Question

[Nikden_72]

Изучаю Django, захотел в проекте реализовать модальное окно, всё работало корректно, пока не реализовал корзину и не попробовал добавить кнопку покупки товара.
Не понимаю как указать переменную {{ cart_product_form }} с скриптом для модального окна.
Сейчас кнопка покупки товара из-за этого отображается не в модальном окне


Скрипт для модального окна

<script>
$('.building-link').click(function(){
    $('#building-img').attr('src', $(this).data('image'));
    $('#building-name').html($(this).data('name'));
    $('#building-descriprion').html($(this).data('descriprion'));
    $('#building-price').html($(this).data('price'));
    $('#building-size').html($(this).data('size'));
    $('#building-weight').html($(this).data('weight'));
    $('#building-testo').html($(this).data('testo'));
});
</script>

мой файл views.py

def menu(request):
    product = Product.objects.all().order_by('-id')
    cats = Category.objects.all()
    paginator = Paginator(product, 8)
    page_number = request.GET.get('page')
    page_obj = paginator.get_page(page_number)
    cart_product_form = CartAddProductForm()
    context = {'page_obj': page_obj, 'product': product, 'cats': cats, 'cat_selected': 0, 'cart_product_form': cart_product_form}
    return render(request, 'myapp/index.html', context)

мой файл index.html

<table class="table-index" >
    <div class="container">
        {% for p in page_obj %}
        <td>
             <a href="#m2-o" class="link-1 building-link"
                                    data-image="{{p.image.url}}"
                                    data-name="{{p.title}}"
                                    data-descriprion="Состав:</br>{{p.descriprion}}"
                                    data-price="{{p.price}}<small>₽</small>"
                                    data-size="{{p.size|default_if_none:""}}"
                                    data-testo="{{p.testo|default_if_none:""}}"
                                    data-weight="{{p.weight|default_if_none:""}}"
                                    id="m2-c">
            <div class="card">
                <div class="card-header">
                    <img src="{{p.image.url}}" alt="rover"/>
                </div>
                <div class="card-body">
                    <span class="tag tag-teal">{{p.cat}}</span>
                    <h4>
                        {{p.title}}
                    </h4>
                    <div class="box">
                        <small>{{p.weight}}</small>
                         <button class="button-price">{{p.price}}р</button>
                    </div>
                </div>
            </div></a>
            {% endfor %}
        </td>
        {% for p in page_obj%}
        <div class="modal-container" id="m2-o" >
            <div class="modal grid1">
                <div class="image-modal">
                    <img id="building-img" src="{{p.image.url}}" alt=""
                </div>
                <div class="modal__div">
                    <h1 class="modal__title" id="building-name">{{p.title}}</h1>
                    <p class="modal__info">
                        <t id="building-size">{{p.size|default_if_none:""}}</t>
                        <t id="building-testo">{{p.testo|default_if_none:""}}</t>
                        <t id="building-weight">{{p.weight|default_if_none:""}}</t>
                    </p>
                    <p class="modal__text" id="building-descriprion">Состав:</br>{{p.descriprion}}</p>
                    <div class="modal__flex_info">
                        <div class="input-container" data-step="1" data-min="1" data-max="100">
                            <input class="input-text" type="text" name="count" value="1">
                            <a href="#" class="input-minus">−</a>
                            <a href="#" class="input-plus">+</a>
                        </div>
                        <p class="modal__price" id="building-price">{{p.price}}<small>₽</small>
                            <a href="#m2-c" class="link-2"></a>
                         
                        <form id="building-basket" action="{% url 'cart:cart_add' p.id %}" method="post">
                            {% csrf_token %}
                                {{ cart_product_form.quantity}}
                            <input type="submit" class="modal__btn" value="Add to cart">
                        </form>
                        
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</table>