javascript: drop down box in form with a button to add a second copy of drop down box

Question

I have a simple form that lists user names and for each user, the form displays a drop down box with a list of items that can be assigned to the user. Since it is often necessary to assign multiple items to a user, I need to display a button next to the drop down that says "add another item" which automatically inserts another an identical drop down box below the first one and preserves the selected option in the original drop down box.

You might be thinking - why not just display a series of radio buttons or checkboxes? Can't do that for two reasons, 1) the list of items is too long and 2) there are times when I need to assign the same item to a user twice.

I know this "add another item" button can be done in javascript, I just don't know the code.

Here's an example of what I need to do (not working b/c there is no onClick function yet). http://www.dropthechalk.org/sampleform.html

This has nothing to do with dynamically populating the items in the drop down box, so I've found it hard to search for solutions. Any help or links to resources much appreciated!

Answer 1

Here is a tutorial that I did a while ago on dynamically adding input elements via JavaScript. This should be a good starting point.