title: Add forms in formset with Django and JS
body: <p>I would like to be able to add dynamically <code>django forms</code> in my <code>formset</code> with <code>Add</code> button.</p>
  
  <p>I tried to write different things but I don't overcome to get the expected result up to now.</p>
  
  <p>I have a <code>formset</code> defined in my <strong>forms.py</strong> file :</p>
  
  <pre><code>AnimalFormSet = inlineformset_factory(Elevage, Animal, form=AnimalForm, extra=1)
  </code></pre>
  
  <p>Then, I created in my <strong>views.py</strong> file this function :</p>
  
  <pre><code>class ElevageCreateView(CreateView):
  
      model = Elevage
      template_name = 'elevage_form.html'
  
      def get_context_data(self, **kwargs):
          context = super(ElevageCreateView, self).get_context_data(**kwargs)
          context['AnimalFormSet'] = AnimalFormSet(self.request.POST or None, self.request.FILES or None)
          return context
  
      def form_valid(self, form):
          context = self.get_context_data()
          animal = context['AnimalFormSet']
          if animal.is_valid():
              self.object = form.save()
              animal.instance = self.object
              animal.save()
          return super(ElevageCreateView, self).form_valid(form)
  
      def get_success_url(self):
          return reverse('animal-list')
  </code></pre>
  
  <p>Finally, I'm trying to write my <strong>template file</strong> :</p>
  
  <pre><code>&lt;fieldset&gt;
      &lt;legend class="title"&gt;&lt;span class="name"&gt;{% trans 'Animal form' %}&lt;/span&gt;&lt;/legend&gt;
      {{ AnimalFormSet.management_form }}
        {% for form in AnimalFormSet.forms %}
          &lt;div class='table'&gt;
             &lt;table class='no_error'&gt;
               {{ form.as_table }}
             &lt;/table&gt;
          &lt;/div&gt;
        {% endfor %}
      &lt;input type="button" class="btn btn-default" value="Add More" id="add_more"&gt;
      &lt;script&gt;
        $('#add_more').click(function () {
          cloneMore('div.table:last', 'service');
        });
      &lt;/script&gt;
    &lt;/fieldset&gt;
  </code></pre>
  
  <p>And I have <strong>javascript function</strong> :</p>
  
  <pre><code> &lt;script&gt;
    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);
  }
    &lt;/script&gt;
  </code></pre>
  
  <p>I spent lot of time in order to get the expected result but I don't overcome to get it. SO I need your help if you could help me.</p>
  
  <p>I don't want to use another library, but I accept <code>JS</code>, <code>AJAX</code>, <code>JQuery</code> or <code>django</code> answers !</p>
  
  <p>Thank you by advance</p>
  
  <p><strong>EDIT :</strong></p>
  
  <p>The issue is : </p>
  
  <p>It displays the first form, but when I want to add a second one by clicking on <code>Add button</code>, it doesn't create the second one.</p>
  
  <p>So I assume my Django part is good, but not the JS part ?</p>