Nested Repeating UI controls

Question

i am working on a web form that has repeating ui elements using the example that i found here with the exception that i am using a multidimensional array instead of appending a number to the name of each element

the only problem i have is that i need to have repeating form controls nested inside of my already repeating form elements. and i am at a complete loss as to how to implement this.

Answer 1

The script in the post you referenced is just grabbing the previous element from anywhere on the document and adding the new element after it. What I would do is wrap each block of repeated controls with a DIV and put some class on it, like "controlContainer". assuming your "#addBtn" is inside this controlContainer, instead of:

$('#input' + num).after(newElem);

you would have:

$(this).closest(".controlContainer").find('#input' + num).after(newElem);

the $(this) will select the #addBtn when inside the click handler, then closest will find the parent "controlContainer".