Triying to make a form but not able to make a new line automatically when creating a new entry

Question

In the last section of my JavaScript function, element.appendChild doesn't work properly to insert a <br> element after each text input. The text inputs are instead displayed inline, not on a new line like the three existing inputs.

<div id='reference'>
        <input id='company' type=text name='refer[]' placeholder='Company Name' size=40 /><br>
        <input id='company' type=text name='refer[]' placeholder='Who to Contact' size=40 /><br>
        <input id='company' type=text name='refer[]' placeholder='Contact Information' size=40 /><br>
    </div><br>
    <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);
    "/>

Answer 1

The issue is that you're creating a single reference to a single <br> element with newLine = document.createElement('br');, you need to create a separate reference for each one, or clone the one you make, or even easier just stick element.appendChild( document.createElement('br') ); where you want the new lines. This snippet should work for you

function customFunction(){
  element=document.getElementById('reference');
  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( document.createElement('br') );
  element.appendChild(newInput1);
  element.appendChild( document.createElement('br') );
  element.appendChild(newInput2);
  element.appendChild( document.createElement('br') );
}

<div id='reference'>
  <input id='company' type=text name='refer[]' placeholder='Company Name' size=40 /><br>
  <input id='company' type=text name='refer[]' placeholder='Who to Contact' size=40 /><br>
  <input id='company' type=text name='refer[]' placeholder='Contact Information' size=40 /><br>
</div>
<input type=button value="Add New Reference" onClick="customFunction()"/>

That said, wouldn't it just be easier to edit your form markup a little bit, clone the whole reference div, and append it to a field container div?

function customFunction(){
  fields = document.getElementById('fields');
  clone  = document.getElementById('reference').innerHTML;
  row    = document.createElement('div');
  
  row.innerHTML = clone;
  
  fields.appendChild( row );
}

<form id="myform">
  <div id="fields">
    <div id="reference">
      <input id="company" type="text" name="refer[]" placeholder="Company Name" size="40" /><br>
      <input id="company" type="text" name="refer[]" placeholder="Who to Contact" size="40" /><br>
      <input id="company" type="text" name="refer[]" placeholder="Contact Information" size="40" /><br>
    </div>
  </div>
  <input type="button" value="Add New Reference" onClick="customFunction()" />
</form>