title: Javascript - Create element select from input
body: <p>I am learning using the events via "nodes" system. But I always have problems with select and options item. The code is good, it works on my local dev. Unfortunately, I had some bugs in JsFiddle =(</p>
  
  <p><strong>Here is the situation.</strong></p>
  
  <p>We have an input, when I type (3 for exemple) and click to "add", I have two inputs (name + surname) that appears for 3 persons in the div "childrenContainer".</p>
  
  <p><strong>Here is the HTML</strong></p>
  
  <pre><code>&lt;h1&gt;Book&lt;/h1&gt;
      &lt;label for="nbEnfants"&gt;Number : &lt;/label&gt;
      &lt;input type="text" id="nbEnfants"&gt;
      &lt;button id="addChildren"&gt;Add&lt;/button&gt;
      &lt;div id="childrenContainer"&gt;
  </code></pre>
  
  <p><strong>Here is the Javascript</strong></p>
  
  <pre><code>    document.getElementById("addChildren").addEventListener('click',
      function(){
          var nbEnfants = document.getElementById("nbEnfants").value;
          var childrenContainer = document.getElementById("childrenContainer");
  
          for(var i=0; i&lt;nbEnfants; i++){
  
              //First added Input
              childrenContainer.appendChild(document.createTextNode("Name : " + (i+1) + " "));
              var input = document.createElement("input");
              childrenContainer.appendChild(input);
              input.setAttribute('type', 'text');
              childrenContainer.appendChild(document.createElement("br"));
  
              //Second input
              childrenContainer.appendChild(document.createTextNode("Surname : " + (i+1) + " "));
              var input2 = document.createElement("input");
              childrenContainer.appendChild(input2);
              input2.setAttribute('type', 'text');
  
              childrenContainer.appendChild(document.createElement("br"));
              childrenContainer.appendChild(document.createElement("br"));
  
          } 
      }
  );
  </code></pre>
  
  <p>This code is good, but I need to add a drop down (select options) for the age of children (1 to 12). Adding inputs is good for me, but adding a select is a little difficult, because I need another loop into this one for adding the age for each children.</p>
  
  <p><strong>I wrote a little idea if it helps you</strong></p>
  
  <pre><code>for(var i = 0; i&lt;12; i++){
                      var select = document.createElement("select");
                      select.setAttribute("name", "selectChildren");
                      select.setAttribute("id", "selectChildren");
                      var option = document.createElement("option");
                      option.setAttribute("value", "value");
                      option.innerHTML = i;
                      select.appendChild(option);
                      childrenContainer.appendChild(document.createElement("br"));
                  }
  </code></pre>
  
  <p>But I don't know how to add a entire drop down after my click event and for each children with his inputs.</p>
  
  <p>I can give you more details if you need help =)</p>
  
  <p>I need explanations if you have a solution, not only the solution, because I will not learn like this =D</p>
  
  <p>Thank you for taking time on my issue =)</p>