Несколько таймеров обратного отсчета, сравнивающих заданное время и текущее время?

Действительно борется с этой частью по какой-то причине.

Я создаю таймер, который могу использовать для отслеживания ставок. Я хочу иметь возможность сравнить два раза и показать разницу (в минутах и ​​секундах) в столбце обратного отсчета. Он должен сравнивать время начала торгов и время прямо сейчас.

Возможно, когда он достигнет начала ставки, он также может измениться, чтобы показать, сколько времени осталось до окончания ставки. В конце концов, я хочу добавить фоновые изменения, когда время приближается, и, возможно, возможность устанавливать будильник с окном подсказки.

Вот код, который у меня есть до сих пор:

HTML

    <table>
<tr>
    <td>Item Name</td>
    <td><input id="itemNameField" placeholder="" type="text"></td>
</tr>
<tr>
    <td></td>
    </tr>
    <tr>
        <td>Time of Notice</td>
        <td><input id="noticeField" type="time"></td>
    </tr>
</table>


<input id="addButton" onclick="insRow()" type="button" value="Add Timer">
<div id="errorMessage"></div>
<hr>
<div id="marketTimerTableDiv">
    <table border="1" id="marketTimerTable">
        <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"></div>Example Item
            </td>
            <td>
                <div id="noticebox"></div>12:52
            </td>
            <td>
                <div id="bidstartbox"></div>13:02
            </td>
            <td>
                <div id="bidendbox"></div>13:07
            </td>
            <td>
                <div id="countdownbox"></div>
            </td>
            <td><input id="delbutton" onclick="deleteRow(this)" type="button" value="X"></td>
        </tr>
    </table>
</div>

ЯВАСКРИПТ

    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);
    }
}

Я заранее извиняюсь, потому что мой код, вероятно, очень грязный и плохо отформатирован. А вот и JSFIDDLE! Спасибо :)