Jak dynamiecznie dodawać formy w django.

Question

Witam,  robię prostą aplikację w której użytkownik może zamawiac dane produkty wybierając odpowieni z listy i podając jego liczbę. Chcę aby na początku wyśiwetlał się tylko jeden produt a a pod spodem był przycisk żeby dodać następną formę z takimi produktami. Próbowałme to robić  js ale po kliknięciu przycisku "add" strona łąduje się na nowo i nic się nie dzieje. Jak moge to zrobić tak żeby wszystko działało?

{% extends "shop/base.html" %}
{% block content %}
    <script>
        const form = document.getElementById('form')
        const root = document.getElementById('main-element')
        root.appendChild(form)  
    </script>
    <div id="main-element">
        <form id="form" enctype="multipart/form-data" method="POST">
            {% csrf_token %}
            {{ form }}
            <button name="add">Add</button>
        </form>
    </div>
    <button name="order" type="submit" >Order</button>
{% endblock content %}

@login_required
def order_view(request):
    if request.method  == "POST":
        form = OrderItemForm(request.POST)
        if form.is_valid():
            order = Order(user=request.user)
            order.save()
            form.save(commit=False)
            form.user = request.user
            form.order = order
            form.save()

    else:
        form = OrderItemForm()

    return render(request, "shop/order.html", {"form": form})