[Answer]-How to create multiples of same form for user

There are a couple of ways to do this.

You can recreate the form object using JavaScript. Then each time you need to add a form, you just rerun the JavaScript function.

Alternatively, you can create the form using regular HTML and assign it ‘hidden’ and the class ‘original’. Then each time you want to add a row, you run the following:

function(){
    var newForm = $('form#blockForm.original').clone().removeClass('original');
    newForm.appendTo($('div.container')).show();
}

To run this function, you might wrap it in a .click() event attached to the “Add Row” button. Don’t use <a href="#" id="insert-more"> Add New Row </a>. Instead, I prefer to go with the following:

HTML:

<span id="insert-more">Add New Row</span>

JavaScript:

$('span#insert-more').click(function(){
    var newForm = $('form#blockForm.original').clone().removeClass('original');
    newForm.appendTo($('div.container')).show();
});

And naturally, you need something to activate this javascript after the span has loaded. I use $(document).ready(function(){//This is where most of my JavaScript file goes.});

—EDIT—

Okay, I suppose I wasn’t very clear up at the top. I was suggesting that you use a sort of master form that’s hidden from view, with the class being ‘original’. Then when you copy this, the code I wrote removes that class, but only from the copy. This is so that you do not copy any of the copies. But you do need to put the class ‘original’ in the original form that you want to copy! You also want to do away with most of the ids in the form, or simply don’t use them at all. I prefer to use classes for this, and then anything I do with the form is usually stated as follows.

$('button.formSubmit').click(function(){
    var $thisForm = $(this).parent().parent();
    //multiple parent functions may be chained together, depending on how far down the button is nested.
    //examples of use:
    $thisForm.children('input.blah1').doSomething();
    var inp2 = $thisForm.children('input.blah2');
    //Really, you can do anything at this point.
});

As for giving the forms unique ids, it is unnecessary so long as you have a way to figure out what belongs to which form, which is simple with the functionality of $(this) which identifies what thing was clicked on and works based off that. Also, if you actually use the standard ‘submit form’ functionality, you don’t have to worry about $(this) because it submits the form in which the button was clicked, regardless of id or class. You only need to worry about ids when you’re going to put something outside of a form that relates to something inside a particular form. But since you’re making duplicate forms, you wouldn’t want to do that anyways.

I have created a plunker for you which clones your html form.

$(function(){
  $("#insert-more").click(function(){
    var form = $("#blockForm").clone();
    $(".container").append(form);
  });
});

“http://plnkr.co/edit/jAyl2EkSkMUPWQa4gwRg?p=preview

Are you sure you want to clone the form or just individual rows inside a single form? If it’s really the latter, you can use a function to duplicate the fieldsets within your form and update the input field names to match.

function dupeForm() {
    var reqs = document.getElementsByClassName('requestForm'),
        btn = document.getElementById('submitButton'),
        len = reqs.length,
        lastReq = reqs[len - 1],
        newReq = lastReq.cloneNode(true),
        txtBxs = newReq.getElementsByTagName('input');

    for (var i = 0; i < txtBxs.length; i++) {
        txtBxs[i].setAttribute('name', 'txt' + len);
        txtBxs[i].setAttribute('id', 'txt' + len);
        txtBxs[i].value = 'More Text';
    }

    lastReq.parentNode.insertBefore(newReq, btn);
}

See the fiddle here: http://jsfiddle.net/vp84oodt/