JSFiddle - React, Tailwind, and code Playground

by Tri Nguyen

HTML

<Head lang="en-US">
<title>Room Management</title>
</Head>
<body>
<h1 id="rootHeading"> welcome to room management</h1>

<!-- Main division -->

<div id="root">
	<label for="#NumberOfPeople">Enter the number of people in the flat: </label>
	<input id="NumberOfPeople" type="text">
	<input id = "submi" type="submit">
</div>
<br>
<br>
<!-- Elements div -->

<div id="dynamic_Content">


</div>


</body>

CSS

#rootHeading {
text-transform: capitalize;
}

JavaScript

var noOfPersons;
function printEmptyBoxes() {
	noOfPersons = document.getElementById("NumberOfPeople").value;
	var dynamicAttach = document.getElementById("dynamic_Content");
	for(var i=0;i<noOfPersons;i++) {
		var name = document.createElement("input");
		var expenditure = document.createElement("input");
		var button1 = document.createElement("input");
		var button2 = document.createElement("input");

		name.setAttribute("type", "text");
		name.setAttribute("id", "person"+(i+1)+"");
		
		
		var exId = "Expenditure"+(i+1);

		expenditure.setAttribute("type", "text");
		expenditure.setAttribute("id", exId);
		
		
		button1.setAttribute("type", "button");
		button1.setAttribute("value", "+");
		button1.setAttribute("onclick", "document.getElementById(exId).value += '+'");
		

		//button1.setAttribute("onclick", 'document.getElementById("Expenditure"+(i+1)+"").value += "+"');
		
		// button1.setAttribute("onclick", "addPlus()");
		button2.setAttribute("type", "button");
		button2.setAttribute("value", "=");


		// button2.setAttribute("onclick", "x += eva);
		
		
		dynamicAttach.appendChild(name);
		dynamicAttach.appendChild(expenditure);
		dynamicAttach.appendChild(button1);
		dynamicAttach.appendChild(button2);
		var brk = document.createElement("br");
		dynamicAttach.appendChild(brk);
	}
}

document.getElementById("submit").onClick = printEmptyBoxes();