How to use JavaScript to provide users with multiple options of types of data to enter

Question

I currently have a page that allows a user to enter different types of database entries via a select("questions" for a survey), i.e. Multiple Choice, Text, Drop-down, etc. Right now this is done using the following code:

<form enctype="multipart/form-data" action="" method="POST" id='mainform'>

<!-- Multiple Choice Div -->
<div id="mc">
<span id='qu'>Question: </span><br><textarea id='qtext' name="question" cols=60
rows=5><?php echo $row['question'];?></textarea><br>
<span id='c-a'>Choice A: </span><input id='ain' type="text" name="choice1"
value="<?php echo $row['choice1'];?>" style="width:550px;"><br id='br1' />
<span id='c-b'>Choice B: </span><input id='bin' type="text" name="choice2" 
value="<?php echo $row['choice2'];?>" style="width:550px;"><br id='br2' />
<span id='c-c'>Choice C: </span><input id='cin' type="text" name="choice3" 
value="<?php echo $row['choice3'];?>" style="width:550px;"><br id='br3' />
<span id='c-d'>Choice D: </span><input id='din' type="text" name="choice4" 
value="<?php echo $row['choice4'];?>" style="width:550px;"><br id='br4' />
<span id='num'>Number: </span><input id='nin' type="text" name="number" 
value="<?php echo $row['number'];?>" style="width:50px;"><br>
<br>
<span id='cbox'><input type="checkbox" name="order" value="1" 
<?php if($row['order']) echo 'checked'; ?> /> Number this question automatically?<br><br></span>
</div>

<!-- Text Div -->
<div id="text">
Question/Prompt: <br><textarea id='qtext' name="question" cols=60 rows=5>
<?php echo $row['question'];?></textarea><br>
Text Box Columns: <input id='ain' type="text" name="choice1" 
value="<?php echo $row['choice1'];?>" style="width:50px;"><br id='br1'>
Text Box Rows: <input id='bin' type="text" name="choice2" 
value="<?php echo $row['choice2'];?>" style="width:50px;"><br id='br2'>
Number: <input id='nin' type="text" name="number" 
value="<?php echo $row['number']; ?>" style="width:50px;"><br>
<br>
<span id='cbox'><input type="checkbox" name="order" value="1" 
<?php if($row['order']) echo 'checked'; ?> /> Number this question automatically?<br><br></span>
</div>

<!-- Divider Div -->
<div id="divider">
<span id='qu'>Text to follow divider: </span><br>
<textarea id='qtext' name="question" cols=60 rows=5><?php echo $row['question'];?></textarea><br>
<span id='num'>Number: </span><input id='nin' type="text" name="number" 
value="<?php echo $row['number'];?>" style="width:50px;"><br>
<br>
</div>

<!-- JS Div -->
<div id="js_q">
<span id='qu'>JavaScript or jQuery (Pure JS or jQ, no 
<code>&lt;script&gt;</code> tags nescessary): </span><br>
<textarea id='qtext' name="question" cols=60 rows=25>
<?php echo $row['question']; ?></textarea><br>
<span id='num'>Number: </span><input id='nin' type="text" name="number" 
value="<?php echo $row['number'];?>" style="width:50px;"><br>
<br>
</div>

<input type="submit" value="Save">
</form>
<button type="button" onClick="document.location='./index.php?tid=
    <?php echo $_GET['tid']; ?>'">Cancel</button>
<script type="text/javascript">
    switch( <?php echo $row['type'];?> ){
    case 0:
          document.getElementById('mainform').removeChild
             (document.getElementById('text'));
          document.getElementById('mainform').removeChild
             (document.getElementById('divider'));
      document.getElementById('mainform').removeChild
             (document.getElementById('js_q'));
          break;
    case 1:
      document.getElementById('mainform').removeChild
             (document.getElementById('mc'));
          document.getElementById('mainform').removeChild
             (document.getElementById('divider'));
      document.getElementById('mainform').removeChild
             (document.getElementById('js_q'));
          break;
    case 2:
        ...
</script>

The inherent problem with this is that, well, it's ugly and inefficient. I also have an insertion page(the page above is the editor), and this is the one that makes changes whenever a select is changed. It is even worse, hiding and unhiding the divs whenever a new option is selected.
I feel like the solution to this is to generate the markup in JS, but I just don't know how. Also, for both pages, I would like to have an anchor that links to a JS function(I know how to do this) that adds another "choice" to the questions.

Thanks,
deftonix