show/hide a number of form fields, depending on select element

[filch]

I have a page where I need to show a number of form input fields depending on what number is selected in a select menu. I have a sort of solution but is is messy and involves too many fields. I need to show up to 15 text input fields; so if a user selects 10 in the select menu, 10 input fields are shown below the menu. If they want to instead show 11 fields, then what I would like is for them to be able to go to the select menu and change their select to 11 from 10, but have the script merely add the 11th field without losing what they have already added to the previous 10 fields. (hope that is not too unclear).

What I have been doing now is creating divs, each containing the number of form fields relative to the numbers 1 to 15. (example at http://www.oab.ca/events/awards/awards-tickets-form2.php ). This is very kludgy.

<label for="number_of_199_tix">number of $199 member Conference Registration tickets requested:</label>
            <select id="number_of_199_tix" name="number_of_199_tix">
              <option value="0" selected="selected">-- choose number of tickets --</option>
              <option value="1memdel">1</option>
              <option value="2memdel">2</option>
              <option value="3memdel">3</option>
              <option value="4memdel">4</option>
              <option value="5memdel">5</option>
              <option value="6memdel">6</option>
              <option value="7memdel">7</option>
              <option value="8memdel">8</option>
              <option value="9memdel">9</option>
              <option value="10memdel">10</option>
              <option value="11memdel">11</option>
              <option value="12memdel">12</option>
              <option value="13memdel">13</option>
              <option value="14memdel">14</option>
              <option value="15memdel">15</option>            
            </select>

<div id="1memdel" style="display:none">
          <li><input name="mem-delegate01" type="text" /></li></div>
          <div id="2memdel" style="display:none">
          	<li><input name="mem-delegate02a" type="text" /></li>
            <li><input name="mem-delegate02b" type="text" /></li>
           </div>
           <div id="3memdel" style="display:none">
          	<li><input name="mem-delegate03a" type="text" /></li>
            <li><input name="mem-delegate32b" type="text" /></li>
            <li><input name="mem-delegate03c" type="text" /></li>
           </div>
           <div id="4memdel" style="display:none">
          	<li><input name="mem-delegate04a" type="text" /></li>
            <li><input name="mem-delegate04b" type="text" /></li>
            <li><input name="mem-delegate04c" type="text" /></li>
            <li><input name="mem-delegate04d" type="text" /></li>
           </div>
etc. etc.

And the jquery is:

$(document).ready(function() {

  $.viewMemDel = {
    '0' : $([]),
    '1memdel' : $('#1memdel'),
    '2memdel' : $('#2memdel'),
    '3memdel' : $('#3memdel'),
	'4memdel' : $('#4memdel'),
	'5memdel' : $('#5memdel'),
	'6memdel' : $('#6memdel'),
	'7memdel' : $('#7memdel'),
	'8memdel' : $('#8memdel'),
	'9memdel' : $('#9memdel'),
	'10memdel' : $('#10memdel'),
	'11memdel' : $('#11memdel'),
	'12memdel' : $('#12memdel'),
	'13memdel' : $('#13memdel'),
	'14memdel' : $('#14memdel'),
	'15memdel' : $('#15memdel')
  };

  $('#number_of_199_tix').change(function() {
    // hide all
    $.each($.viewMemDel, function() { this.hide(); });
    // show current
    $.viewMemDel[$(this).val()].show();
  });
});

I also need to hide these input fields initially until the user selects something.

I would sincerely appreciate any help getting this going as I am more than a bit under the gun here.

TIA

Dave