<script>
        $(document).ready(function(){
            $("#add-item").click(function(ev) {
                ev.preventDefault();
                var count = $('#order').children().length;
                var tmplMarkup = $("#item-order").html();
                var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
                $("div#order").append(compiledTmpl);

                // update form count
                $('#id_product-TOTAL_FORMS').attr('value', count + 1);

                // some animate to scroll to view our new form
                $('html, body').animate({
                    scrollTop: $("#add-item").position().top-200
                }, 800);
            });
        });
</script>


HTML-----------------
                <div id="order" class="pure-form pure-form-aligned">
                    {% for item_order_form in formset %}
                        <div id="item-{{ forloop.counter0 }}" class="pure-control-group">
                            {{ item_order_form.as_p }}
                        </div>
                    {% endfor %}
                </div>

                <div class="pure-control-group" >
                <a class="btn btn-light" id="add-item"><i class="fa fa-plus"></i> Add Item</a>
                    <button class="btn btn-primary pull-right" value="Save"><i class="fa fa-floppy-o"></i> Salvar</button>
                </div>
            </form>
    </div>

    <script type="text/html" id="item-order">
        <div id="item-__prefix__" style="margin-top: 10px" class="pure-control-group">
                {{ formset.empty_form.as_p }}
        </div>
    </script>