JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<title> New Document </title>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</head>
<script>
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'age' + iteration;
el.id = 'age' + iteration;
el.placeholder = 'Age...' + iteration;
el.size = 4;
cellRight.appendChild(el);
// right cell1
var cellRight = row.insertCell(1);
var el1 = document.createElement('input');
el1.type = 'text';
el1.name = 'fname' + iteration;
el1.id = 'fname' + iteration;
el1.placeholder = 'Father Name..' + iteration;
el1.size = 25;
cellRight.appendChild(el1);
// right cell2
var cellRight = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'name' + iteration;
el2.id = 'name' + iteration;
el2.placeholder = 'Name...' + iteration;
el2.size = 25;
cellRight.appendChild(el2);
// ADDED
//Insert on the 5th column
var cellRight = row.insertCell(4);
//create and append the button
var e13 = document.createElement('input');
e13.type = 'button';
e13.value = 'remove';
cellRight.appendChild(e13);
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>
<body>
<form action="sample.html">
</form>
<table border="1" id="tblSample">
<tr>
<th colspan="5">Customer Details</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="name1"id="name1" size="25" placeholder = 'Name...1'/></td>
<td><input...