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>
<tr><td>
<input type="button" id="addButton" value="Add Timer" onclick="insRow()"/></td><td><div id="errorMessage"></div></td></tr></table><br>
Please alert me <input type="number" id="alarmTime" min="1" max="10"> minutes before bid starts <input type="checkbox" id="alarmSet">
    <hr> 

<div id ="marketTimerTableDiv">  <table id="marketTimerTable" style="width:100%;border-bottom:1px solid black;">
        <tr>
            <th></th>
            <th>Item Name</th>
            <th>Time of Notice</th>
            <th>Bid Start</th>
             <th>Bid End</th>
             <th>Countdown</th>
            <th></th>
        </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>

CSS

table, th, td {
  border-collase: collapse;
  padding: 5px;
  text-align: left;
}

th {
  text-transform: uppercase;
  background-color: #3b3b3b; 
  color: #fff; 
  font-family: open sans, sans-serif; 
}

input[type="button"] {
	background-color: #ff7700;
	color: #fff;
	font-size: 14px;
	border: none;
	cursor: pointer;
	text-transform: uppercase;
  padding: 5px;
}

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;
    noticeField.stepDown(15);
    var noticeTime = noticeField.value.split(":");
    var originalTime = noticeField.value.split(":");
    const interval = setInterval(function(){
      var currentDate = (new Date());
      noticeTime[1] = originalTime[1] - currentDate.getMinutes() + 10;
      noticeTime[1] = noticeTime[1] + (originalTime[0] * 60) - (currentDate.getHours() * 60);
      if( noticeTime[1] < -5 ) { 
      inp5.innerHTML = "EXPIRED";  
      inp5.style.color = "red";
      } else if ( noticeTime[1] < 1 && noticeTime[1] > -6) { 
      inp5.innerHTML = "BID PHASE"; 
      inp5.style.color = "green";
      } else {
      inp5.innerHTML = noticeTime[1] + "M";
 ...