need to display extra text inputs when selecting add button, also need to remove fields

Question

I have a form that requires the user to input their project\'s outcome.

They are required to input at least one outcome, and each outcome has a requirement of at least 2

Answer 1

Here is something I put together:

http://jsfiddle.net/jtbowden/XFsyh/

The trickiest part, and most of the code is dealing with form input names.

The main part of the code depends on a non-displayed template which is cloned when elements are added. This makes it easier to create new elements, because you just have to modify the template.

Update: Here is a version that allows you to remove the first outcome/measure as long as others exist, plus I cleaned up some other things (bugs):

http://jsfiddle.net/jtbowden/XFsyh/4/

Note the use of .live(). The buttons in your example don't work because you are assigning handlers once, before those buttons exists. .live() assigns the handler to the root of the DOM, so that any elements added later will also have the correct handler.

Here is the original version with fixes, as per you request:

http://jsfiddle.net/jtbowden/JTUkE/

And if you want it animated:

http://jsfiddle.net/jtbowden/brBSa/