Динамические новые формы в Django

У меня есть этот код, и я хочу создать динамический новый набор форм. Добавляя и удаляя кнопки в Модели у меня есть классы Customer, Product и AddProduct

class Customer(models.Model):
    customer = models.CharField(max_length=200, null=True, blank=False)

class Product(models.Model):
    customer = models.ForeignKey(Customer, on_delete=models.CASCADE, null=True, related_name='customer_product')
    product = models.CharField(max_length=200,choices=PRODUCT, blank=False)


class AddProduct(models.Model):
   customer = models.ForeignKey(Customer, on_delete=models.CASCADE, null=True, blank=True,related_name='customer_add_product')
   products = models.ForeignKey(Product, on_delete=models.CASCADE, null=True, blank=True, related_name='product_add_product')
   add_product = models.CharField(max_length=200, choices=PRODUCT, blank=True,null=True)

в формах

    class PersonCreationForm(forms.ModelForm):
       class Meta:
         model = Product
         fields = ['product']

class AddProductForm(forms.ModelForm):
   class Meta:
      model = AddProduct
      fields = ['add_product']

в просмотрах

 def CreateView(request, pk):
     customer = get_object_or_404(Customer, pk=pk)
         formset_addedFormset = modelformset_factory(AddProduct, form=AddProductForm)
    form = PersonCreationForm(request.POST or None)
    formset = formset_addedFormset(request.POST or None, queryset=AddProduct.objects.none(), prefix="product_add_product")

if request.method == 'POST':
    if form.is_valid() and formset.is_valid():
        new_form = form.save(commit=False)
        new_form.customer=customer
        new_form.save()
        product = Product.objects.all().last()
        print(product)

        for add_product in formset:
            new_formset = add_product.save(commit=False)
            new_formset.customer=customer
            new_formset.products = product
            new_formset.save()
    else:
       print('error')
context = {'customer':customer,
            'formset':formset,
            'form':form,
            }
return render(request, create.html',context)

в файле create.html

   {% load crispy_forms_tags %}
   {% block content %}
   <form method="POST">
     {% csrf_token %}
                            <!-- here for create Product -->
                            {% for form in form %}
                              <table>
                                  
                                <td>{{form.product|as_crispy_field}}</td>
                                      {% endfor %}
                                      <!-- end for -->

                                   {{ formset.management_form }}

                                    {% for formset in formset.forms %}
 
                                    {{ formset.field_errors }}
                                    {{ formset.errors }}
                                    {% endfor %}
                                             {% for hidden in formset.hidden_fields %}
                                             {{ hidden }}
                                         {% endfor %}

                        <!-- HERE for create Add_Product as Dynamic New FormSet -->
                                  
                                    {% for formset in formset %}
                                    <tr class="item">

                              <td>{{ formset.add_product|as_crispy_field  }}</td>

  <td><button type="button" class="btn btn-danger btn-sm remove-form-row"
                                     id="{{ formset.prefix }}">Delete</button><td>
                                      </tr>
                                     {% endfor %}

                           <td colspan="9"
                                        style="border-left: none!important; border- 
            right: none !important; border-bottom: none!important;">
                                        <button type="button" class="btn btn-sm btn- 
                      success add-form-row"
                                                id="{{ formset.prefix }}">
                                           Add
                                        </button>
                                    </table>
      <hr>
           <input class="btn btn-secondary btn-lg mt-2" type="submit" value="submit">
           


     </form>
     {% endblock %}

     {% block extra_script %}
     <script type="text/javascript" src="{% static 'js/formset.js' %}"></script>
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     {% endblock%}

в файле formset.js

 function updateElementIndex(el, prefix, ndx) {
 var id_regex = new RegExp('(' + prefix + '-\\d+-)');
 var replacement = prefix + '-' + ndx + '-';
 if ($(el).attr("for")) $(el).attr("for", 
 $(el).attr("for").replace(id_regex,replacement));
 if (el.id) el.id = el.id.replace(id_regex, replacement);
 if (el.name) el.name = el.name.replace(id_regex, replacement);}

 function addForm(btn, prefix) {
 var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
 if (formCount < 1000) {
    // Clone a form (without event handlers) from the first form
    var row = $(".item:last").clone(false).get(0);

    // Insert it after the last form
    $(row).removeAttr('id').hide().insertAfter(".item:last").slideDown(300);
    
    // Remove the bits we don't want in the new row/form
    // e.g. error messages
    $(".errorlist", row).remove();
    $(row).children().removeClass("error");
    
    // Relabel or rename all the relevant bits
    $(row).find('.formset-field').each(function () {
        updateElementIndex(this, prefix, formCount);
        $(this).val('');
        $(this).removeAttr('value');
        $(this).prop('checked', false);
    });

    // Add an event handler for the delete item/form link
    $(row).find(".delete").click(function () {
        return deleteForm(this, prefix);
    });
    // Update the total form count
    $("#id_" + prefix + "-TOTAL_FORMS").val(formCount + 1);
    

    } // End if

    return false;
    }


   function deleteForm(btn, prefix) {
   var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
   if (formCount > 1) {
      // Delete the item/form
      var goto_id = $(btn).find('select','input','lable').val();
      if( goto_id ){
        $.ajax({
            url: "/" + window.location.pathname.split("/")[1] + "/formset-data- 
         delete/"+ goto_id +"/?next="+ window.location.pathname,
            error: function () {
              console.log("error");
            },
            success: function (data) {
              $(btn).parents('.item').remove();                 
            },
            type: 'GET'
        });
      }else{
        $(btn).parents('.item').remove();
      }

      var forms = $('.item'); // Get all the forms
      // Update the total number of forms (1 less than before)
      $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
      var i = 0;
      // Go through the forms and set their indices, names and IDs
      for (formCount = forms.length; i < formCount; i++) {
          $(forms.get(i)).find('.formset-field').each(function () {
              updateElementIndex(this, prefix, i);
          });
      }
  } // End if
  console.log('yes was removed')

  return false;
  }

  $("body").on('click', '.remove-form-row',function () {
   deleteForm($(this), String($('.add-form-row').attr('id')));
  });

  $("body").on('click', '.add-form-row',function () {
  return addForm($(this), String($(this).attr('id')));
 });

Проблема:

Проблема заключается в создании продукта и в Add Product FormSet он создает только один продукт. Я хочу создать как можно больше, добавляя

Вернуться на верх