JSFiddle - React, Tailwind, and code Playground

by itamark

HTML

<body style="width:100%;">
	 <p>I would like to say: </p>
	 <table></table>
	 <button onclick="addrow();">Add</button>
</body>

JavaScript

//Add New Camera Row
	var id = 0;
function addrow(){
	id++;
	//Create the shell
	var newRow = '<tr class=\"camrow\" id=\"cameranum'+ id +'\"></tr>';
		if($('tr.camrow').length){                //check to see if any exist
		$("tr.camrow:last").after(newRow);
		}
		else {
		$("table").append(newRow);
		}
		
	//insert delete button
	var deleteButton = '<td><button onclick=\"removeRow('+ id +')\">Remove</button></td>'
	$("tr.camrow#cameranum" + id).append(deleteButton);
	
	//insert description field
	var descriptionField = '<td><input type=\"text\" id=\"description\" size=\"20\"></input></td>'
	$("tr.camrow#cameranum" + id).append(descriptionField);
	
	//insert quantity field
	var quantityField = '<td><input type=\"text\" id=\"quantity\" size=\"1\"></input></td>'
	$("tr.camrow#cameranum" + id).append(quantityField);
	
	//insert type dropdown
	var typeDropdown = '<td> <select name=\"camtype\"><option value=\"ip\">IP</option><option value=\"analog\">Analog</option><option value=\"hdsdi\">HD-SDI</option><option value=\"audio\">Audio</option></select></td>'
	$("tr.camrow#cameranum" + id).append(typeDropdown);
	
	//insert compression dropdown
	var compressionDropdown = '<td> <select name=\"compression\"><option value=\"mpeg4\">MPEG4</option><option value=\"mjpeg\">MJPEG</option><option value=\"h264\">H.264</option><option value=\"mxpeg\">MxPEG</option></select></td>'
	$("tr.camrow#cameranum" + id).append(compressionDropdown);
	
	//insert fps field
	var fpsField = '<td><input type=\"text\" id=\"fps\" size=\"1\"></input></td>'
	$("tr.camrow#cameranum" + id).append(fpsField);
	
	//insert recording percentage field
	var recordpercField = '<td><input type=\"text\" id=\"recordperc\" size=\"1\"></input></td>'
	$("tr.camrow#cameranum" + id).append(recordpercField);
	
	//insert days field
	var daysField = '<td><input type=\"text\" class=\"days\" size=\"1\"></input></td>'
	$("tr.camrow#cameranum" + id).append(daysField);
	
	//insert datarate field
	var datarateField = '<td><input...