title: Triying to make a form but not able to make a new line automatically when creating a new entry
body: <p>In the last section of my JavaScript function, <code>element.appendChild</code> doesn't work properly to insert a <code>&lt;br&gt;</code> element after each text input. The text inputs are instead displayed inline, not on a new line like the three existing inputs.</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-html lang-html prettyprint-override"><code>&lt;div id='reference'&gt;
          &lt;input id='company' type=text name='refer[]' placeholder='Company Name' size=40 /&gt;&lt;br&gt;
          &lt;input id='company' type=text name='refer[]' placeholder='Who to Contact' size=40 /&gt;&lt;br&gt;
          &lt;input id='company' type=text name='refer[]' placeholder='Contact Information' size=40 /&gt;&lt;br&gt;
      &lt;/div&gt;&lt;br&gt;
      &lt;input type=button value="Add New Reference" onClick=" 
    element=document.getElementById('reference');
    newLine=document.createElement('br');
    newInput=document.createElement('input');
    newInput.placeholder='Company Name';
    newInput.size=40;
    newInput.id=company;
    newInput.name='refer[]';
    newInput.type='text';
    newInput1=document.createElement('input');
    newInput1.placeholder='Who to Contact';
    newInput1.size=40;
    newInput1.id=company;
    newInput1.name='refer[]';
    newInput1.type='text';
      
    newInput2=document.createElement('input');
    newInput2.placeholder='Contact Information';
    newInput2.size=40;
    newInput2.id=company;
    newInput2.name='refer[]';
    newInput2.type='text';
      
    element.appendChild(newInput);element.appendChild(newLine);
    element.appendChild(newInput1); 
    element.appendChild(newInput2);
      "/&gt;</code></pre>
  </div>
  </div>
  </p>