title: Add input elements dynamically [pure JS]
body: <p>I'm new to JS and need your help!<br>
  I have an upload formula where the user can add multiple files to a db (php, mysql).<br><br>
  Now I want that the input buttons will added dynamically, means when 1 field is filled, a other field shows up and so on and so forth.<br>
  Every file do have also a title field, it would looks like this</p>
  
  <pre><code>                    Add one more file
  +--------------+    +---------------+
  |              |    |       +       |
  |  ヽ( ≧ω≦)ノ   |   |     ++++++     |
  |              |    |       +       |
  +--------------+    +---------------+
  &gt; Titel ABC    &lt;    &gt; ______________&lt;
  </code></pre>
  
  <p>I would hide the input button and will replace it with an image with a "+" or something, but this is not part of this question, just you can see, what i try to reach at the end of the day :)</p>
  
  <p>This is a code, which i found in the internet and edited a bit, but I have problems to replace the "option" with <b>input=file + input=text</b>. So when the user clicks on "add" a select button <b>and</b> a text field will show up.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function add(type) {
    //Create an input type dynamically.
    var element = document.createElement("input");
  
    //Assign different attributes to the element.
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);
  
    var foo = document.getElementById("fooBar");
  
    //Append the element in page (in span).
    foo.appendChild(element);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    font-family: Arial;
  }
  
  body {
    background-color: grey;
  }
  
  h1 {
    color: white;
  }
  
  h2 {
    color: darkgrey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;h1&gt;Add input elements dynamically&lt;/h1&gt;
    &lt;h2&gt;Please select any type&lt;/h2&gt;
  
    &lt;div&gt;
      &lt;select name="element"&gt;
        &lt;option value="file"&gt;File&lt;/option&gt;
        &lt;option value="text"&gt;TextBox&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;input type="button" value="add" onclick="add(document.forms[0].element.value)" /&gt;
      &lt;span id="fooBar"&gt;&amp;nbsp;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>