title: Javascript to add/delete a form in a django formset
body: <p>Going off of @Paolo Bergantino answer to <a href="https://stackoverflow.com/questions/501719/dynamically-adding-a-form-to-a-django-formset-with-ajax">this previous SO question</a> , I've been trying to dynamically add forms to my formset. But, the newly added form seems to be somehow "linked" to the previous one. So, clicking a checkbox on the new form influences the old one. Additionally, once I submit, only one form is displayed in the post. What happened to all the other newly added ones?</p>
  
  <p>addAnother.js</p>
  
  <pre><code>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;
  
          if ($(this).attr('type') != 'hidden') {
              $(this).val('');
          }
          $(this).attr({'name': name, 'id': id}).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);
  }
  </code></pre>
  
  <p>template.html</p>
  
  <pre><code>{% load crispy_forms_tags %}
  &lt;script src="{{ STATIC_URL }}js/addAnother.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;form action="{% url 'databank:register' %}" method="post" enctype="multipart/form-data"&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="row" style="margin-top: 30px"&gt; 
        &lt;div class="col-md-10 col-md-offset-1"&gt;
          {{ dataset_form.media }}
          {% crispy dataset_form %}
          {% crispy facility_form %}
          {% crispy contact_form %}
  
          {{ author_formset.management_form }}
          {% for form in author_formset.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" value="Add More" id="add_more"&gt;
  
          {% crispy terms_form %}
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-10 col-md-offset-1"&gt;
          &lt;a role="button" class="btn btn-lg btn-default" href="{% url 'databank:databank_home' %}"&gt;Cancel&lt;/a&gt;
          &lt;input type="submit" class="btn btn-lg btn-success pull-right" value="Proceed to Data Upload"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  
  
  
  &lt;script type="text/javascript"&gt;
      $('#add_more').click(function() {
          cloneMore('div.table:last', 'service');
      });
  </code></pre>
  
  <p></p>