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

Triangle Background css 01

Triangle Background css 01

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Social Media Icons

Social Media Icons

Pie Charts

Pie Charts

Login Bootstrap3

Login Bootstrap3

Loading Style snake

Loading Style snake

Image hover style border top

Image hover style border top

Image hover Inspiration styles

Image hover Inspiration styles

Image hover Flip Flap Style

Image hover Flip Flap Style

Image hover 06

Image hover 06

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4