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);
	}
}
texte animate effects style 01

texte animate effects style 01

Vidéo background en html5 style02

Vidéo background en html5 style02

Radio button style

Radio button style

Profile page with b4

Profile page with b4

Image hover Flip Flap Style

Image hover Flip Flap Style

Form login 03

Form login 03

Form Création de compte

Form Création de compte

Elastic Content Slider

Elastic Content Slider

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Create icon animate with svg

Create icon animate with svg

Card 4 Product Style01

Card 4 Product Style01

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

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