Создайте встроенный набор форм в django, используя javascript

Question

Форма Я использовал inlineformset_factory для создания нескольких экземпляров одной и той же модели. Хочу сделать динамику c. Итак, у меня есть кнопка +, когда пользователь нажимает эту кнопку, будет сгенерирована такая же форма. Я также хочу сохранить кнопку удаления для удаления. Для этой работы я написал функцию jquery. Но когда я нажимаю кнопку +, ничего не происходит. Форма не создается.

forms.py:

WorkExperienceFormset = inlineformset_factory(Employee, WorkExperience, extra=1,
                                                fields = [
                                                    'previous_company_name',
                                                    'job_designation',
                                                    'from_date',
                                                    'to_date',
                                                    'job_description',
                                                ],
                                                widgets = {
                                                        'previous_company_name': forms.TextInput(attrs={'class': 'form-control form-control-sm'}),
                                                        'job_designation': forms.TextInput(attrs={'class': 'form-control form-control-sm'}),
                                                        'from_date': forms.DateInput(attrs={'class': 'form-control form-control-sm has-feedback-left single_cal', 'id': 'single_cal3'}, format='%m/%d/%Y'),
                                                        'to_date': forms.DateInput(attrs={'class': 'form-control form-control-sm has-feedback-left single_cal', 'id': 'single_cal4'}, format='%m/%d/%Y'),
                                                        'job_description': forms.TextInput(attrs={'class': 'form-control form-control-sm'}),
                                                }
                                            )

Модель WorkExperience связана с моделью Employee как ForeignKey. employee_work_experience_form. html. html:

<!-- Manage collection of forms -->
{{ work_formset.management_form }}

<!-- Handle formset errors -->
{% for work_form in work_formset %}
  {{ work_form.non_field_errors }}
  {{ work_form.errors }}
{% endfor %}

{% for work_form in work_formset %}
<div class="work-form">
  <div class="item form-group">
    <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">Previous Company Name</label>
    <div class="col-md-4 col-sm-4 col-xs-12">
      <!-- <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> -->
      {{ work_form.previous_company_name }}
    </div>
  </div>
  <div class="item form-group">
    <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">Job Designation</label>
    <div class="col-md-4 col-sm-4 col-xs-12">
      <!-- <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> -->
      {{ work_form.job_designation }}
    </div>
  </div>
  <div class="item form-group">
    <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">Job Details</label>
    <div class="col-md-4 col-sm-4 col-xs-12">
      <!-- <input type="text" id="last-name" name="last-name" required="required" class="form-control col-md-7 col-xs-12"> -->
      {{ work_form.job_description }}
    </div>
  </div>
  <div class="item form-group">
    <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">From Date</label>
    <div class="col-md-2 col-sm-2 col-xs-12">
      <!-- <input id="birthday" class="date-picker form-control col-md-7 col-xs-12" required="required" type="text"> -->
      <div class="form-group has-feedback">
        {{ work_form.from_date }}
        <span class="fa fa-calendar-o form-control-feedback left m-1" aria-hidden="true"></span>
      </div>
    </div>
  </div>
  <div class="item form-group">
    <label class="col-form-label col-md-4 col-sm-4 col-xs-12 label-align">To Date</label>
    <div class="col-md-2 col-sm-2 col-xs-12">
      <!-- <input id="birthday" class="date-picker form-control col-md-7 col-xs-12" required="required" type="text"> -->
      <div class="form-group has-feedback">
        {{ work_form.to_date }}
        <span class="fa fa-calendar-o form-control-feedback left m-1" aria-hidden="true"></span>
      </div>
    </div>
  </div>
</div>

{% endfor %}

Я включаю этот html в основную форму employee_form. html как тег шаблона включения.

<h4>Work Experience</h4>
                <button type="button" value="add" id="add_work_experience"><i class="fa fa-plus" aria-hidden="true"></i></button>
                <div class="ln_solid"></div>
                {% include 'employee/employee_work_experience_form.html' %}

jquery :

 // Add work experience
    $(document).ready(function() {
      $('#add_work_experience').click(function() {
        cloneMore('work-form', 'work_form');
      });
    });


    function cloneMore(selector, type) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
}

когда я нажимаю кнопку +, ничего не происходит. Я не знаю, в чем проблема.

На правильном ли я пути?