ipv6-dot-work/jobs/templates/jobs/job_form.html

{% extends 'base.html' %}
{% block title %}Post a Job{% endblock %}

{% load crispy_forms_tags %}

{% block body_content %}
<div class="row">
    <div class="col-md-12">
        <form method="POST" action=".">  
            {% csrf_token %}      
            {{ form|crispy }}
            <h4>Screening Questions</h4>
            {{ question_form|crispy }}

            <a id="add_more" href="">Add More</a><br/>
            <input class="btn btn-primary btn-block my-2" type="submit" value="Post Job"/>
        </form>
        {{form.media}}
    </div>
</div>
<script>
    // modified from https://stackoverflow.com/a/669982
    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);
        }
    $(document).ready(function() {

        $('#add_more').click(function () {
            cloneMore('.multiField:last', 'questions');
            return false;
        });
    })
</script>
{% endblock %}