Submit duplicated forms with one button using Javascript

Question

I'm having a form that it can be duplicated with a click of a button add more. But I'm facing a problem submitting all the forms at once. I'm using Django and Javascript. How can I fix it.

{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block content %}
<div id="content" class="span9">
    {% if form.errors %}
    <div class="alert alert-error">
        <h4>{{ form.errors }}</h4>
    </div>
    {% endif %}
    <div id = "duplicater" class="span9">
        <h1>Add new Profile</h1>   
         <button id="button" class="btn btn-success" onlick="duplicate()">Add more</button> 
    <hr/>

    <form class="form-horizontal ajax" action="{% url 'create_profile' %}" method="post">{% csrf_token %}
    {{ form|crispy}}

        <div class="form-actions">
            <a class="btn ajax" data-spinner="off" href="{% url 'home' %}">Cancel</a>
            <input class="btn btn-primary" type="submit" value="Save"/>
             <hr/>
        </div>
        </form>
    </div>
    </div>

<script type="text/javascript">  
    document.getElementById('button').onclick = duplicate;
    var i = 0;
    var original = document.getElementById('duplicater');

    function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicater" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
    }
</script>
{% endblock %}

Answer 1

You should place them all within the same <form> element in the template.

That is, rather than naming the entire form duplicater and duplicating that, you should wrap your {{ form|crispy }} variable in a div called duplicater and append copies to the end of that, within the single <form> element.