I'm going to try to accurately explain what I need help with. I am putting together a site that will allow people to put together their own online tests. When they create/edit an item/question to be on the test they can use the following select box to select what type of item/question it will be:

HTML Code:
<select>
<option>[Select One]</option>
<option>Checkbox (Multiple Answers)</option>
<option>Date</option>
<option>Dropdown List (Only One Answer)</option>
<option>Email Address</option>
<option>Image</option>
<option>Numeric : Decimal Number</option>
<option>Numeric : Whole Number</option>
<option>Radiobutton (Only One Answer)</option>
<option>Text : Multiple Lines</option>
<option>Text : Single Line</option>
</select>
If the test creator selects an option such as "Checkbox (Multiple Answers)" then a new DIV appears where those possible multiple answers can be specified. Now the problem is that the way me and the back end guy see it now each possible answer has to be contained in its own form element because different actions can potentially be performed on each possible answer, actions such as Save, Cancel, Delete, etc. So, in short, we are ending up with something like:

HTML Code:
<!--Begin Master Form-->
<form>

stuff (that doesn't pertain to this question but is present in the larger form on the page

more such stuff

<option>[Select One]</option>
<option selected>Checkbox (Multiple Answers)</option>
<option>Date</option>
<option>Dropdown List (Only One Answer)</option>
<option>Email Address</option>
<option>Image</option>
<option>Numeric : Decimal Number</option>
<option>Numeric : Whole Number</option>
<option>Radiobutton (Only One Answer)</option>
<option>Text : Multiple Lines</option>
<option>Text : Single Line</option>
</select>

more such stuff

more such stuff

  <form>stuff pertaining to possible answer #1</form>
  <form>stuff pertaining to possible answer #2</form>
  <form>stuff pertaining to possible answer #3</form>
  <form>stuff pertaining to possible answer #4</form>

<input type="submit" value="Save">

</form>
<!--End Master Form-->
But since you can't nest forms we have been trying to do this thing where those dependent forms are outside of the master form in the DOM but use CSS to create a blank spot in which to rest in the master form and made to visually appear as though they are part of the master form. This is causing all sorts of other problems beyond what is described here and I just have to think there is a better way to do it. Yes, we might still be able to get this to work but I have the uneasy feeling that we are just piling hacks on top of hacks. Does anyone know a better approach?