How to implement adder input in django forms?
<p>I spent several hours trying to figure out,How to implement Adder input in django.</p>

<p>My probleme is in my template I implemented a javascript script that adds additional fields to a form.</p>

<p>those fields are key/value fields, in my model I created a JSONField.
I wanted to grab data from dynamic fields and store them as key values in my JSONField</p>

<p>forms.py</p>

<pre><code>class MyForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
    form_fields = kwargs.pop("fields", {})
    super(CrontabForm, self).__init__(*args, **kwargs)
    for field in form_fields:
        field_name = field['name']
        field_label = field['label']
        field_type = field['type']
        self.fields[field_name] = forms.CharField(label=field_label)
        print fields.name

class Meta:
    model = MyModel
</code></pre>

<p>models.py</p>

<pre><code>class MyModel(models.Model):
user = models.ForeignKey(getattr(settings, 'AUTH_USER_MODEL'), verbose_name=_('User'))
params = JSONField(_('Url params'))
</code></pre>

<p>views.py</p>

<pre><code>class MyView(LoginRequiredMixin, SuccessMessageMixin, CreateView):

model = MyModel
form_class = MyForm
template_name = '/index.html'
success_url = '/success/'
success_message = "The instance was created successfully"

def form_valid(self, form):
    form.instance.user = self.request.user
    return super(MyView, self).form_valid(form)
</code></pre>

<p>my jquery.js:</p>

<pre><code>{% block custom_js %}
{{ block.super }}
&lt;script&gt;

    console.log('tesss');
    $(document).ready(function () {
        // Number of params


        var index = 0;

        function addParams() {
            var tmp_template = $('template').clone();
            var paramsDiv = $('#params');
            paramsDiv.append(tmp_template.html());
            $($('[class$="param-x"]')[index]).attr('name', 'param' + (index + 1));
            $($('[class$="value-x"]')[index]).attr('name', 'value' + (index + 1));
            index = index + 1;
        }

        addParams();

        $('#addParam').on('click', function(){
           addParams();
        });

    });
&lt;/script&gt;
{% endblock %}
</code></pre>

<p>index.html:</p>

<pre><code>        &lt;div class="col-md-12"&gt;

        &lt;form action="." method="post"&gt;
            &lt;div class="col-md-6"&gt;
                {% csrf_token %}
                {% for field in form %}
                    &lt;div class="form-group"&gt;
                        &lt;div class="row"&gt;
                            {{ field.errors }}
                            &lt;label class="col-md-2 control-label"&gt;{{ field.label_tag }}&lt;/label&gt;

                            &lt;div class="col-md-6"&gt;
                                {{ field }}
                            &lt;/div&gt;
                            {% if field.help_text %}
                                &lt;p class="help"&gt;{{ field.help_text|safe }}&lt;/p&gt;
                            {% endif %}
                        &lt;/div&gt;
                    &lt;/div&gt;
                {% endfor %}


                &lt;div class="text-center"&gt;
                    &lt;div class="pagination"&gt;

                        &lt;i class="btn btn-success waves-input-wrapper waves-effect"
                           style="color:#fff ;background:#5cb85c"&gt;
                            &lt;input class="waves-button-input" type="submit" value="Add"
                                   style="background-color:rgba(0,0,0,0);"&gt;&lt;/i&gt;

                        {% url 'cron:crontab-list'  as cronslist %}
                        {#            &lt;div class="col-sm-offset-5 col-sm-2 text-center"&gt;#}
                        &lt;a href="{{ cronslist }}"&gt;&lt;i class="btn btn-primary waves-input-wrapper waves-effect"
                                                     style="color:#fff;background:#286090"&gt;
                            &lt;input class="waves-button-input has-value" type="button" value="Cancel"
                                   style="background-color:rgba(0,0,0,0);"&gt;
                        &lt;/i&gt;&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="col-md-6"&gt;

                &lt;div class="row"&gt;
                    &lt;div class="col-md-10"&gt;
                        &lt;div style="text-align:center"&gt;
                            &lt;label class="col-md-4"&gt;Param&lt;/label&gt;
                            &lt;label class="col-md-6"&gt;Value&lt;/label&gt;

                        &lt;/div&gt;
                    &lt;div id="params"&gt;&lt;/div&gt;

                    &lt;!-- The template for adding new field --&gt;

                    &lt;template&gt;
                        &lt;div class="form-group"&gt;

                            &lt;div class="col-md-4"&gt;
                                &lt;input type="text" class="form-control param-x"  placeholder="Task"/&gt;
                            &lt;/div&gt;
                            &lt;div class="col-md-6"&gt;
                                &lt;input type="text" class="form-control value-x" placeholder="Task"/&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="col-md-10"&gt;
                            &lt;hr&gt;
                        &lt;/div&gt;
                    &lt;/template&gt;
                &lt;/div&gt;
                &lt;div class="col-md-2"&gt;
                    &lt;label class="col-md-2"&gt;Add&lt;/label&gt;
                    &lt;button id="addParam" type="button" class="btn btn-default addButton"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt;&lt;/button&gt;


                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;/div&gt;


            &lt;/div&gt;
</code></pre>