Dynamic input field generation

Hi all,

I have a complicated (well to me it is!) problem with a form I am creating for my site. The form has three sections with the ability to add another field unlimited times. There is one for adding ingredients, one for equipment and one for steps

The name and id does increment on all 3 however the problem is they seem to all be using the same count, by this I mean that if I add 2 steps (which brings the count to 3) and then add an ingredient, the ingredient id goes to ingredient4 - obviously because it is taking the count that step has set. I am no javascript guru, I am more a designer so I’m really struggling, Ive been working on this one for days…

There is also another problem in that if I create say 3 steps bringing the count up to step4 and then remove the second step, I cant see how I can bring the other steps after step2 count down by one, at the moment step4 and step3 are staying as step3 and step4 but because step2 was removed they should drop down to becoming step2 and step3. My php that inserts the data into my db isnt working because the ids keep getting messed up

I have a demo URL up on ajburchell.com/form.html

If anyone can help me with this I will be extremely grateful

Thank you in advance

When coming up with the name to use, use a loop to start counting from 1 so that you can check if ingredient1, ingredient2, … exists. As soon as you find one that doesn’t exist, break out of the loop and use that number.

When you remove one, you could check if a next value exists. If it does, you need to drop its number, and then check if one beyond that exists. Repeat until end.