JSFiddle - React, Tailwind, and code Playground

by iulianmihu

HTML

<!DOCTYPE html>
<html>
<body>

<form action="" method="POST">               
<table id="dataTable" width="100%" border="1">
  <tbody>
    <tr>
      <td>
        <input type="checkbox" required="required" name="chk[]" checked="checked" />
				<input type="text" size="3" name="NR_tab[]" disabled>
  			<select name="BC_id[]" required="required">
          <option>test 1</option>
          <option>test 2</option>
          <option>test 3</option>
        </select>
				<datalist id="id_bc"></datalist>
				<input type="text" required="required" style="width: 80px" name="BC_cantitatea[]" onchange="javascript: calculate(this.value);" placeholder="cantitate" autocomplete="off">
				<input type="text" name="BX_total[]" disabled>
			</td>
     </tr>
  </tbody>
</table>
<input type="button" value="Add produs" onClick="addRow('dataTable')" /> 
<input type="button" value="Clear" onClick="deleteRow('dataTable')"  /> 
<center><button type="submit" class="nice radius button">Finalizare</button></center>
</form>
<br>

<p>Click the button to add a "Kiwi" option at the index position "2" of the dropdown list (before "Banana").</p>

<button type="button" onclick="myFunction()">Insert option</button>

JavaScript

function addRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCounts = table.rows.length;
		var row = table.insertRow(-1);
		var colCount = table.rows[0].cells.length;
		for(var i=0; i<colCount; i++) {
			var newcell = row.insertCell(i);
			newcell.innerHTML = table.rows[0].cells[i].innerHTML;
			document.getElementsByName("NR_tab[]")[rowCounts].value = rowCounts +1;
		}
}

function deleteRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	if(rowCount > 1){
		document.getElementById(tableID).deleteRow(-1);
	}
	
}
function my_code(tableID){
	document.getElementsByName("NR_tab[]")[0].value = "1";
}