How to Append Two Input fields at the same time and skip line after every entry

Question

I've created a form to be able to calculate area using coordinates. So the user is supposed to enter coordinate pairs (y,x) and every time the user clicks add new form fields should show up with the two coordinate pairs. I came up with this code in JS

function add(type) {

	//================================== generating content for the y-coordinate =============================
	//create an input element dynamically
	var element = document.createElement("input");

	//assign different attributes to the element.
	element.setAttribute("type", "text");
	element.setAttribute("value", "");
	element.setAttribute("name", "field");
	element.setAttribute("class", "smallbox");

	var foo = document.getElementById("fooBar");

	//Append the element in page (in span).
	foo.appendChild(element);
	//================================ end of content for the y-coordinate ========================================
	

	//================================== generating content for the x-coordinate =====================================
	//create an input element dynamically 
	var el = document.createElement("input");

	//assign different attributes to the element
	el.setAttribute("type", "text");
	el.setAttribute("value", "");
	el.setAttribute("name", "field");
	el.setAttribute("class", "smallbox");

	var foo_x = document.getElementById("fooBar_x");

	//Append the element in page (in span).
	foo_x.appendChild(el);

	//=========================================== end of content for the x-coordinate ==================================

and the HTML code is:

<form>
<h4>Land Area</h4>
<br>
<select name="element" value="text" class="hidden">
</select>

<div style="text-align:center;">
<span id="fooBar">&nbsp;</span><span id="fooBar_x">&nbsp;</span>


<br><br>
<input type="button" value="Add" class="btn" onclick="add(document.forms[0].element.value)">
</div>
<br><br>
<p style="text-align:center;">
<input type="button" value="Calculate" class="btn" onclick="display()">
</p>
</form>

The problem is every time the user clicks Add, the new set is added after the previous element, in this case soon after the first span tag but I want the code to append both fields at the bottom of the previous two entries.

Please help

Answer 1

Place the two new fields you append into a div parent container and just append the div instead of the two spans.

Also, if you are not submitting the form data anywhere, you don't need the form element and you won't need to set a name for the form fields (each should have a different name when you do use it though). Additionally, if you are going to use an h4, it should be nested within an h3 element. Headings are not used for how they make the text look - - they are semantic (as is all of HTML).

And, you can just set up the new inputs using DOM properties and methods instead of generic .setAttribute().

See additional comments inline.

// Do all your event binding in JavaScript, not HTML
document.querySelector("input.btn.add").addEventListener("click", add);
document.querySelector("input.btn.calc").addEventListener("click", display);

// Get DOM references you'll use over and over just once:
let select = document.getElementById("primarySelect");
let main = document.querySelector("div.main");

function add(){

  // Create a wrapper for the two new input fields
  var wrapper = document.createElement("div");

  // Create the two new input fields and configure them:
  var elementY = document.createElement("input");
  elementY.type = "text";
  elementY.placeholder = "Enter Y coordinate";
  elementY.classList.add("smallbox");

  var elementX = document.createElement("input");
  elementX.type ="text";
  elementX.placeholder = "Enter X coordinate";  
  elementX.classList.add("smallbox");

  // Append the elements into the wrapper
  wrapper.appendChild(elementY);
  wrapper.appendChild(elementX);

  // Append the wrapper to the document
  main.appendChild(wrapper);
  
}

function display(){

}

.center { text-align:center; }
.hidden { display:none; }
.btn { margin:1em; }

<h1>Land Area</h1>
<select id="primarySelect" value="text" class="hidden"></select>
<div class="main center"></div>

<p class="center">
  <input type="button" value="Add" class="btn add"><br>
  <input type="button" value="Calculate" class="btn calc">
</p>