1. Use a table in a single form. When I need to add an additional registration add another row to the table with all of the selects that I need.
2. Use a separate form for each set of selects. When I need another row just insert another form. One possible problem here is that there isn't an easy way to then submit everything. I don't think that will be an issue in my case, however, as the database will be incrementally updated. The final "Confirm Enrollment" button will then change a flag on all of the in-progress records for that particular user.
What is the cleanest way to insert these additional elements?
In both cases one problem I see is being able to uniquely identify the inserted element so that I can make sure I'm reading from and setting the correct selects. I think that the solution to this is to pass the id of the select in to the first JSMX call and then use document.getElementById('id').parentNode.getElementById('otherSelectThatINeedToRead').value to get the correct values. Does that make sense?
Is one of these the preferred way to do this? Is there something entirely different that I should be doing?