JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<table>
<tr><td>Item Name</td>
<td><input type="text" id="itemNameField" placeholder=""/></td><tr></tr>
<tr><td>Time of Notice</td>
<td><input type="time" id="noticeField" /></td></tr></table>
<input type="button" id="addButton" value="Add Timer" onclick="insRow()"/><div id="errorMessage"></div>
<hr>
<div id="marketTimerTableDiv"> <table id="marketTimerTable" border="1">
<tr>
<td></td>
<td>Item Name</td>
<td>Time of Notice</td>
<td>Bid Start</td>
<td>Bid End</td>
<td>Countdown</td>
<td></td>
</tr>
<tr>
<td></td>
<td><div id="itembox"/> Example Item</td>
<td><div id="noticebox" />12:52</td>
<td><div id="bidstartbox" />13:02</td>
<td><div id="bidendbox" />13:07</td>
<td><div id="countdownbox" /></td>
<td><input type="button" id="delbutton" value="X" onclick="deleteRow(this)"/></td>
</tr>
</table>
JavaScript
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
if(i == 1){
console.log="hi";
}
else {
document.getElementById('marketTimerTable').deleteRow(i);
}
}
function insRow()
{
if(itemNameField.value == "" || noticeField.value == "") {
var div = document.getElementById('errorMessage');
div.innerHTML = "*Please fill in the fields*";
div.style.color = 'red';
document.body.appendChild(div);
} else {
var div = document.getElementById('errorMessage');
div.innerHTML = "";
var x=document.getElementById('marketTimerTable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
var inp1 = new_row.cells[1].getElementsByTagName('div')[0];
inp1.id += len;
inp1.innerHTML = itemNameField.value;
itemNameField.value = "";
var inp2 = new_row.cells[2].getElementsByTagName('div')[0];
inp2.id += len;
inp2.innerHTML = noticeField.value;
noticeField.stepUp(10);
var inp3 = new_row.cells[3].getElementsByTagName('div')[0];
inp3.id += len;
inp3.innerHTML = noticeField.value;
noticeField.stepUp(5);
var inp4 = new_row.cells[4].getElementsByTagName('div')[0];
inp4.id += len;
inp4.innerHTML = noticeField.value;
var inp5 = new_row.cells[5].getElementsByTagName('div')[0];
inp5.id += len;
inp5.innerHTML = "";
noticeField.value = "";
x.appendChild( new_row );
}
}