Clone in JQuery and adding unique IDs for each

Question

I\'m creating a simple web app, where users come in; make a selection from drop down boxes and enter some text. Once this is completed, users press a \"generate\" button whi

Answer 1

I think you can use jQuery clone() function to implement your "add row" functionality.

Check out the last example for giving each new row an unique id.

Answer 2

i've updated your fiddle to give the new forms unique id's

http://jsfiddle.net/zq3AN/

it's probably not exactly perfect, but should get you going in the right direction.

var uniqueId = 1;
$(function() {
     $('.addRow').click(function() {
         var copy = $("#original").clone(true);
         var formId = 'NewForm' + uniqueId;
         copy.attr('id', formId );


         $('#campaign').append(copy);
         $('#' + formId).find('input,select').each(function(){
            $(this).attr('id', $(this).attr('id') + uniqueId);

         });
         uniqueId++;  
     });
});

basically you copy the form, change it's id, and append it to the div. then you look form all the inputs and selects and append the same uniqueId parameter to their ids.