title: Use jQuery to add extra html select input fields in form
body: <p>Trying to create a form for a travel website. For one of the features I want to have the user select how many children they want to take on their trip. Subsequently, I then want the form to add new select fields the number of which depends on the amount of children selected. This is what I have so far:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select id="children"&gt;
      &lt;option value ="0"&gt;0&lt;/option&gt;
      &lt;option value ="1"&gt;1&lt;/option&gt;
      &lt;option value ="2"&gt;2&lt;/option&gt;
      &lt;option value ="3"&gt;3&lt;/option&gt;
      &lt;option value ="4"&gt;4&lt;/option&gt;
      &lt;option value ="5"&gt;5&lt;/option&gt;
      &lt;option value ="6"&gt;6&lt;/option&gt;
      &lt;option value ="7"&gt;7&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id="childrenAge"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$("select#children").on("change", function() { 
      var number = parseInt($("#children").val());
      var newDropLabel = $("#childrenAge").append("&lt;label&gt;Age of children: &lt;/label&gt;");
      var newDropList = $('&lt;select class="Age"&gt;&lt;option value="0"&gt;0&lt;/option&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;option value="3"&gt;3&lt;/option&gt;&lt;option value="4"&gt;4&lt;/option&gt;&lt;option value="5"&gt;5&lt;/option&gt;&lt;option value="6"&gt;6&lt;/option&gt;&lt;option value="7"&gt;7&lt;/option&gt;&lt;option value="8"&gt;8&lt;/option&gt;&lt;option value="9"&gt;9&lt;/option&gt;&lt;option value="10"&gt;10&lt;/option&gt;&lt;option value="11"&gt;11&lt;/option&gt;&lt;option value="12"&gt;12&lt;/option&gt;&lt;option value="13"&gt;13&lt;/option&gt;&lt;option value="14"&gt;14&lt;/option&gt;&lt;option value="15"&gt;15&lt;/option&gt;&lt;option value="16"&gt;16&lt;/option&gt;&lt;/select&gt;');
      $("div#childrenAge").append(newDropLabel);
      for (i = 0; i &lt; number; i++) {
         $("div#childrenAge").append(newDropList);   
      };
  });
  </code></pre>
  
  <p>After selecting a number, this produces the new label and only one new select element. I've checked and the number variable gives the correct number value output. Not quite sure why it's not working.</p>
  
  <p>I also want to add a label to each new select field, something like "Child 1" which increments each time depending on the amount of children chosen.</p>
  
  <p>Any tips would be amazing. </p>
  
  <p>Thanks.</p>