title: Javascript onclick Button Display Form Fields
body: <p>I have created a form using Javascript and HTML and what I would like to achieve is when the user clicks "Add Item" button after filling out the default form fields a second row beneath the first form fields gets displayed with the same exact form fields displayed in the first one. Essentially allowing the user to add X amount of items to a "package" by utilizing the same form fields used in the first one. Trying to explain as best as possible. Currently the Code I am providing is displaying a DIV with sample text to get my head wrapped around what I want to happen. I am new to Javascript but willing to get my hands dirty. Any help would be appreciated. </p>
  
  <pre><code>Pick a Collection:
  &lt;select id="slct1" name="slct1" onchange="populate('slct1','slct2')"&gt;
      &lt;option class="array" value=""&gt;Lets get started..&lt;/option&gt;
      &lt;option class="array" value="Adirondack"&gt;Adirondack&lt;/option&gt;
      &lt;option class="array" value="Ridgeline"&gt;Ridgeline&lt;/option&gt;
      &lt;option class="array" value="Horizon"&gt;Horizon&lt;/option&gt;
  &lt;/select&gt;
  Choose an Item:
  &lt;select id="slct2" name="slct2"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
  &lt;/select&gt;
  Color:
  &lt;select id="slct3" name="slct3"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;option value=""&gt;1 Solid Color&lt;/option&gt;
      &lt;option value=""&gt;Mix and Match&lt;/option&gt;
  &lt;/select&gt;
  Quantity:
  &lt;select id="slct4" name="slct4"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;option value=""&gt;1&lt;/option&gt;
      &lt;option value=""&gt;2&lt;/option&gt;
      &lt;option value=""&gt;3&lt;/option&gt;
      &lt;option value=""&gt;4&lt;/option&gt;
      &lt;option value=""&gt;5&lt;/option&gt;
      &lt;option value=""&gt;6&lt;/option&gt;
  &lt;/select&gt;
  &lt;br/&gt;
  &lt;div id="theDiv"&gt;&lt;/div&gt;
  &lt;button id="addItem" onclick="document.getElementById('theDiv').innerHTML='you touched the button'"&gt;Add Item&lt;/button&gt;
  
  
  function populate(s1,s2) {
  var s1 = document.getElementById(s1);
  var s2 = document.getElementById(s2);
  s2.innerHTML = "";
      if(s1.value == "Adirondack") {
          var optionArray = ["|","shoreline|Shoreline Adirondack Chair - AD-0100","fanback|Fanback Adirondack Chair - AD-0101","coastal|Coastal Adirondack Chair - AD-0102", "leftWindsail|Left Windsail Adirondack Chair - AD-0103", "rightwindsail|Right Windsail Adirondack Chair - AD-0104", "roayale|Royale Adionrdack Chair - AD-0105", "folding|Folding Adirondack Chair - AD-0106", "kidz|Kidz Adirondack Chair - AD-0107","shoreline|Shoreline Adirondack Rocker - AD-0110", "fanbackrocker|Fanback Adirondack Rocker - AD-0111", "coastal|Coastal Adirondack Rocker - AD-0112" ];
      } else if(s1.value == "Ridgeline") {
          var optionArray = ["|","rl-0200|Ridgeline High Back Rocker - RL-0200","rl-0201-36|Ridgeline 36 Inch Gliding Bench - RL-0201-36","rl-0201-48|Ridgeline 48 Inch Gliding Bench - RL0201-48","rl-0201-60|Ridgeline 60 Inch Gliding Bench - RL0201-60" ];            
      } else if(s1.value == "Horizon") {
          var optionArray = ["|","hz-0300|Horizon High Back Rocker - HZ-0300","hz-0301-36|Horizon 36 Inch Gliding Bench - HZ-0301-36","rl-0201-48|Horizon 48 Inch Gliding Bench - HZ-0301-48","hz-0301-60|Horizon 60 Inch Gliding Bench - HZ-0301-60" ];          
      }               
  for(var option in optionArray) {
      var pair = optionArray[option].split("|");
      var newOption = document.createElement("option");
      newOption.value = pair[0];
      newOption.innerHTML=  pair[1];
      s2.options.add(newOption);      
  }   
  }
  </code></pre>