jquery closest and clone issue

Question

I have a drag and drop form builder and I want to repeat form elements using a button.

I did the sample here

When I click the Repeat Button, it automatically add the form elements to the form field at the end of the form. But the issue is I am missing the repeat button from the parent element and I can see two repeat button on the new element.

I am using the below code to append the element to form:

$("#sjfb").on("click", ".rpt", function() {
        var ele = $(this).closest('.field').clone(true);   
        $('html, body').animate({ scrollTop: $(document).height() }, 1000);
        $(this).appendTo('#form-fields').after(ele);

    });

But when I change it to below code, I can easily add the form elements to the closest field and no issues at all. But I need the new elements in the end of the form.

$("#sjfb").on("click", ".rpt", function() {
        var ele = $(this).closest('.field').clone(true);   
        $(this).closest('.field').after(ele);
            });

Please help me to resolve this!

Answer 1

use $('#form-fields').append(ele); this means it will append the cloned element at the end of the form element.