Шаблон работает некорректно в Django

Я пытаюсь создать страницу для логистической компании, где пользователь может запросить цену через эту страницу. Я пытаюсь реализовать страницу, на которой я могу нажать на кнопку добавления товара и затем она позволит мне выбрать товар из выпадающего меню, а затем позволить мне указать количество для него.

это мой models.py

from django.db import models
from phonenumber_field.modelfields import PhoneNumberField
from django.utils import timezone
from .states import STATE_CHOICES,prod_choices


class Product(models.Model):
    name = models.CharField(max_length=100,choices=prod_choices, unique=True)

    def __str__(self):
        return self.name
    

class Quote(models.Model):
    id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=60)
    email = models.EmailField()
    address=models.CharField(max_length=150)
    ph_num= PhoneNumberField()
    state=models.CharField(max_length=45,choices=STATE_CHOICES,default="State")
    city=models.CharField(max_length=20,default="City")
    pincode = models.CharField(max_length=10)
    created_at = models.DateTimeField(auto_now_add=True)
    order_id=models.CharField(max_length=255, unique=True,default="#")
    process_status=models.BooleanField(default="False")


    def generate_order_id(self): 
        state_abbreviation = self.state[:3].upper()
        city_abbreviation = self.city[:3].upper()
        current_datetime = timezone.now().strftime('%Y%m%d%H%M%S')
        order_id = f"{state_abbreviation}_{city_abbreviation}_{self.name}_{current_datetime}"

        return order_id
    

    def __str__(self):
        return f"Quote {self.id}"



class QuoteProduct(models.Model):
    quote = models.ForeignKey(Quote, on_delete=models.CASCADE)
    product = models.ForeignKey(Product, on_delete=models.CASCADE)
    quantity = models.PositiveSmallIntegerField(default=0)

    def __str__(self):
        return f"{self.product.name} - {self.quantity}"

Это мой файл forms.py

from django import forms
from .models import Quote
from .models import QuoteProduct
class QuoteForm(forms.ModelForm):
    class Meta:
        model = Quote
        fields = ['name', 'email', 'address', 'ph_num', 'state', 'city', 'pincode']

class QuoteProductForm(forms.ModelForm):
    class Meta:
        model = QuoteProduct
        fields = ['product', 'quantity']

Это мой views.py

from django.shortcuts import render, redirect
from .forms import QuoteForm
from .models import Quote, QuoteProduct  # Corrected import
from django.forms.models import inlineformset_factory

def quote_form_view(request):
    QuoteProductFormSet = inlineformset_factory(Quote, QuoteProduct, fields=('product', 'quantity'), extra=1)
    
    if request.method == 'POST':
        quote_form = QuoteForm(request.POST)
        quote_product_formset = QuoteProductFormSet(request.POST)

        if quote_form.is_valid() and quote_product_formset.is_valid():
            quote_instance = quote_form.save(commit=False)
            order_id = quote_instance.generate_order_id()
            quote_instance.order_id = order_id
            quote_instance.save()
            
            quote_product_formset.instance = quote_instance
            quote_product_formset.save()

            return redirect('index')  # Redirect to the desired page after successful submission
    else:
        quote_form = QuoteForm()
        quote_product_formset = QuoteProductFormSet()

    return render(request, 'quote.html', {'quote_form': quote_form, 'quote_product_formset': quote_product_formset})

а это моя цитата.html

{% extends 'pagetemp.html' %}
{% load static %}
{% load crispy_forms_tags %}

{% block content %}
  <div class="divider">
    <span>Request a quote</span>
    <div class="quote-form">
      <form action="" method="post">
        {% csrf_token %}
        {{ quote_form|crispy }}

        <h3>Products</h3>
        {{ quote_product_formset.management_form }}
        <div id="quote-product-forms">
          {% for form in quote_product_formset.forms %}
            <div class="quote-product-form">
              {{ form|crispy }}
            </div>
          {% endfor %}
        </div>

        <button type="button" id="add-product-btn" class="btn btn-primary">Add Product</button>
        <button type="submit" class="btn btn-primary custom-btn-create-post">Submit</button>
      </form>
    </div>
  </div>
{% endblock %}

{% block jscript %}
  <script>
    const formContainer = document.getElementById('quote-product-forms');
    const addProductBtn = document.getElementById('add-product-btn');
    const totalForms = document.getElementById('id_quote_product_set-TOTAL_FORMS');

    addProductBtn.addEventListener('click', () => {
      const formCopyTarget = document.querySelector('.quote-product-form');
      const formCopy = formCopyTarget.cloneNode(true);

      formCopy.querySelectorAll('input, select, textarea').forEach(field => {
        field.name = field.name.replace(`quote_product_set-__prefix__`, `quote_product_set-${totalForms.value}`);
        field.value = '';
      });

      formContainer.appendChild(formCopy);
      totalForms.value = parseInt(totalForms.value) + 1;
    });
  </script>
{% endblock %}

У меня появляются прочерки в выпадающем списке и флажок удаления. Кнопка добавления товара также не работает.

Я пытался переписать models.py и forms.py, но это просто не работает.

<form action="{% url '< your url >' %}" method="post">

let container = document.getElementById('quote-product-forms');
let addProductBtn = document.getElementById('add-product-btn');
let totalForms = document.getElementById('id_quoteproduct_set-TOTAL_FORMS');

addProductBtn.addEventListener('click', () => {
    let productForms = container.querySelectorAll(".quote-product-form")
    let formNum = productForms.length-1
    let newForm = productForms[formNum].cloneNode(true)
    let formRegex = RegExp(`quoteproduct_set-(\\d){1}-`,'g')
    formNum++
    newForm.innerHTML = newForm.innerHTML.replace(formRegex, `quoteproduct_set-${formNum}-`)
    container.appendChild(newForm)
    totalForms.setAttribute('value', `${formNum+1}`)
});