Dynamically save the form

Question

I am trying not to use formset in my form. Instead of that, I trying to create form dynamically and save all forms data in DB. Currently, I can create a dynamic form, but the thing is I fail to save all data from the form even though I create multiple forms. Now my code only can save only one form. But I want to save the whole form (with multiple form data) in DB.

views.py

def create_order(request):
    from django import forms
    form = OrderForm()

    if request.method == 'POST':
        forms = OrderForm(request.POST)
        if forms.is_valid():
            po_id = forms.cleaned_data['po_id']
            supplier = forms.cleaned_data['supplier']
            product = forms.cleaned_data['product']
            part = forms.cleaned_data['part']

            order = Order.objects.create(
                po_id=po_id,
                supplier=supplier,
                product=product,
                part=part,
            )
            return redirect('order-list')
    context = {
        'form': form
    }
    return render(request, 'store/addOrder.html', context)

forms.py

class OrderForm(forms.ModelForm):
    class Meta:
        model = Order
        fields = ['supplier', 'product', 'part','po_id']

        widgets = {
            'supplier': forms.Select(attrs={'class': 'form-control', 'id': 'supplier'}),
            'product': forms.Select(attrs={'class': 'form-control', 'id': 'product'}),
            'part': forms.Select(attrs={'class': 'form-control', 'id': 'part'}),        
        }

HTML

<form action="#" method="post" id="form-container"  novalidate="novalidate">
                            {% csrf_token %}
                        <div class="form">            
                            <div class="form-group">
                                <label for="po_id" class="control-label mb-1">ID</label>
                                {{ form.po_id }}
                            </div>
                            
                            <div class="form-group">
                                <label for="supplier" class="control-label mb-1">Supplier</label>
                                {{ form.supplier }}
                            </div>
                            <div class="form-group">
                                <label for="product" class="control-label mb-1">Product</label>
                                {{ form.product }}
                            </div>
                            <div class="form-group">
                                <label for="part" class="control-label mb-1">Part Name</label>
                                {{ form.part }}
                            </div>     
                        </div>
                        <button id="add-form" type="button">Add Another Order</button>
                            <div>
                                <button id="payment-button" type="submit" class="btn btn-lg btn-success btn-block">
                                    <span id="payment-button-amount">Save</span>
                                </button>
                            </div>
                        </form>
                        <script>
                            let poForm = document.querySelectorAll(".form")
                            let container = document.querySelector("#form-container")
                            let addButton = document.querySelector("#add-form")
                            let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
                        
                            let formNum = poForm.length-1
                            addButton.addEventListener('click', addForm)
                        
                            function addForm(e){
                                e.preventDefault()
                        
                                let newForm = poForm[0].cloneNode(true)
                                let formRegex = RegExp(`form-(\\d){1}-`,'g')
                        
                                formNum++
                                newForm.innerHTML = newForm.innerHTML.replace(formRegex, `form-${formNum}-`)
                                container.insertBefore(newForm, addButton)
                                
                                totalForms.setAttribute('value', `${formNum+1}`)
                            }
                        </script>

Answer 1

if request.method == 'POST':
    forms = OrderForm(request.POST)
    if forms.is_valid():
        po_id = forms.cleaned_data['po_id']
        supplier = forms.cleaned_data['supplier']
        product = forms.cleaned_data['product']
        part = forms.cleaned_data['part']
    
        forms.save()  # add save here 

        order = Order.objects.create(
            po_id=po_id,
            supplier=supplier,
            product=product,
            part=part,
        )
        
        return redirect('order-list')