Как сохранить две динамически связанные формы вместе - django

Я пытаюсь сохранить три формы вместе: вот сценарий; форма 1 Номер счета, форма 2 Название товара может иметь несколько товаров в одном счете, форма 3 Серийный номер, серийный номер если в форме2 количество одного товара = 10 то у нас есть 10 уникальных серийных номеров, а количество второго товара = 4 мы должны добавить 4 уникальных серийных номера, в одной кнопке отправки. я использовал maodelformset_factory чтобы сделать формы динамическими вот модели

class ItemName(models.Model):
    item_name = models.CharField(max_length=60,unique=True)

class Invoice(models.Model):
    admin = models.ForeignKey(User,on_delete=models.PROTECT)
    company = models.ForeignKey(ClientCompany,on_delete=models.PROTECT)
    invoice_no = models.IntegerField(blank=True,null=True)
    items = models.ManyToManyField(ItemName,through='Item')

class Item(models.Model):
    invoice = models.ForeignKey(Invoice,on_delete=models.PROTECT,related_name='invoice')
    item = models.ForeignKey(ItemName,on_delete=models.PROTECT,related_name='item_name')
    qnt = models.IntegerField()
    price = models.DecimalField(decimal_places=3,max_digits=20)

class Serial(models.Model):
    item = models.ForeignKey(Item,on_delete=models.PROTECT)
    serial_no = models.CharField(max_length=15,unique=True)
    status = models.BooleanField(default=True)

и я использовал modelform я думаю, что это не требует размещения форм, Серия и Пункт modelformset_factory, и вот вид

@login_required
def create_invoice_view(request):
    form = InvoiceForm()
    item_formset = itemformset(queryset=Item.objects.none())
    serial_formset = serialformset(queryset=Serial.objects.none())
    if request.POST:
        form = InvoiceForm(request.POST)
        item_formset = itemformset(request.POST)
        serial_formset = serialformset(request.POST)

        if form.is_valid() and item_formset.is_valid() and request.user.is_superuser:                                                
            invoice_obj = form.save(commit=False)
            invoice_obj.admin = request.user
            invoice_obj.save()
            data = {
                'id':invoice_obj.id
            }
            for item in item_formset:
                item_obj = item.save(commit=False)
                item_obj.invoice = invoice_obj
                item_obj.save()
                for serial in serial_formset:
                    serial_obj = imei.save(commit=False)
                    serial_obj.item = item_obj
                    serial_obj.save()
            return JsonResponse({'success':True,'data':data})                                    
        else:
            return JsonResponse({
           'success':False,'error_form_msg':form.errors,'error_item_msg':item_formset.errors,'error_serial_msg':serial_formset.errors})
    context = {
        'form':form,
        'item_formset':item_formset,
        'serial_formset':serial_formset
    }
    return render(request,'storage/invoices.html',context)

и вот мой код jquery и html

    const addNewRow = document.getElementById('add-more')    
    const totalNewForms = document.getElementById('id_form-TOTAL_FORMS')
    
    addNewRow.addEventListener('click',add_new_row);
    function add_new_row(e){
        if(e){
            e.preventDefault();
        }  
        const currentFormClass = document.getElementsByClassName('child_forms_row')
        const countForms = currentFormClass.length
        const formCopyTarget = document.getElementById('form-lists')

        const empty_form = document.getElementById('empty-form').cloneNode(true);        
        empty_form.setAttribute('class','child_forms_row')
        empty_form.setAttribute('id',`form-${countForms}`)
        const rgx = new RegExp('__prefix__','g')
        empty_form.innerHTML = empty_form.innerHTML.replace(rgx,countForms)

        totalNewForms.setAttribute('value',countForms + 1)
        formCopyTarget.append(empty_form)
        const serialBtn = document.getElementById('Serial-0')
        serialBtn.setAttribute('id',`Serial-${countForms}`)
        $(`#Serial-${countForms}`).attr('data-target',`#Serial${countForms}`)
        const my_modal = document.getElementById('Serial0').cloneNode(true)
        my_modal.setAttribute('id',`Serial${countForms}`)
        const main_modal =  document.getElementsByClassName('allModal')

        main_modal.append(my_modal)