JSFiddle - React, Tailwind, and code Playground
HTML
Timer 1: <span id="countdown1" class="timer"></span>
<br/>Timer 2: <span id="countdown2" class="timer"></span>
<br/>Timer 3: <span id="countdown3" class="timer"></span>
JavaScript
var timerData = [];
function secondPassed(row) {
var seconds = timerData[row].remaining;
var minutes = Math.round((seconds - 30) / 60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown' + row).innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(timerData[row].timerId);
document.getElementById('countdown' + row).innerHTML = "Buzz Buzz";
} else {
seconds--;
}
timerData[row].remaining = seconds;
}
function timer(row, min) {
timerData[row] = {
remaining: min * 60,
timerId: setInterval(function () { secondPassed(row); }, 1000)
};
}
timer(1, 3);
timer(2, 2);
timer(3, 5);