Add Remove dynamic rows with dynamic ID of input in HTML table

<!DOCTYPE html>
<html>
<head>
	<title> Add/Remove dynamic rows with dynamic ID of input in HTML table | par NGLESSON </title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Add/Remove dynamic rows with dynamic ID of input in HTML table">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<BODY class="container">
<div class="row">
    <div class="col-12 mt-5 " nowrap>
		<INPUT type="button" class="btn btn-md btn-success" value="Add Row" onclick="addRow('dataTable')" />
		<INPUT type="button" class="btn btn-md btn-danger" value="Delete Row" onclick="deleteRow('dataTable')" />
	</div>
	<div class="col-12 mt-5">
		<TABLE id="dataTable" class="table table-hover">
			<TR>
				<TD><INPUT type="checkbox" name="selectedinput" id="selectedinput" /></TD>
				<TD><INPUT type="text" name="inputname" id="inputname" class="form-control"/></TD>
				<TD><INPUT type="number" name="inputage" id="inputage" class="form-control"/></TD>
				<TD>
					<SELECT name="inputcountry" id="inputcountry" class="form-control">
					    <OPTION value="0"></OPTION>
						<OPTION value="01">Maroc</OPTION>
						<OPTION value="02">France</OPTION>
						<OPTION value="03">Canada</OPTION>
						<OPTION value="04">Mali</OPTION>
					</SELECT>
				</TD>
			</TR>
		</TABLE>
	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</BODY>
</HTML>

                                    

function addRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);
	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;
		//alert(newcell.childNodes);
		switch(newcell.childNodes[0].id) {
			case "inputname":
					newcell.childNodes[0].value = "";
					newcell.childNodes[0].id = "inputname"+rowCount;
					break;
			case "inputage":
					newcell.childNodes[0].value = "";
					newcell.childNodes[0].id = "inputage"+rowCount;
					break;
			case "selectedinput":
					newcell.childNodes[0].checked = false;
					newcell.childNodes[0].id = "selectedinput"+rowCount;
					break;
			case "inputcountry":
					newcell.childNodes[0].selectedIndex = 0;
					newcell.childNodes[0].id = "inputcountry"+rowCount;
					break;
		}
	}
}

function deleteRow(tableID) {
	try {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;

	for(var i=0; i<rowCount; i++) {
		var row = table.rows[i];
		var chkbox = row.cells[0].childNodes[0];
		if(null != chkbox && true == chkbox.checked) {
			if(rowCount <= 1) {
				alert("Cannot delete all the rows.");
				break;
			}
			table.deleteRow(i);
			rowCount--;
			i--;
		}
	}
	}catch(e) {
		alert(e);
	}
}
bootstrap4 tabs

bootstrap4 tabs

SwiperJS style01

SwiperJS style01

SwiperJS Lazy Load Images

SwiperJS Lazy Load Images

Profile page with b4

Profile page with b4

Pie Charts

Pie Charts

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Input range slider HTML style05

Input range slider HTML style05

Input range slider HTML style04

Input range slider HTML style04

Image hover 07

Image hover 07

Image hover 02

Image hover 02

Background div gradient

Background div gradient

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01