I am running a javascript timer that can be manually initiated/terminated,start and stop respectively.The timer is running fine.However,it seems the timer is only running for the top most entry in the table.If I click other buttons in different data rows the response is only happening in the top most row/entry.I want every counter to be identical to a single data entry/row.Here is the javascript code. `
var status =0;
var time = 0;
function start() {
status = 1;
document.getElementById("startBtn").disabled = true;
timer();
}
function stop(numberPlate) {
status = 0;
var time = document.getElementById('timerLabel').innerHTML;
var car_no = numberPlate;
var stx = {no : time};
console.log(stx);
window.localStorage.setItem(car_no, time);
}
function reset() {
status = 0;
time = 0;
document.getElementById("startBtn").disabled = false;
document.getElementById("timerLabel").innerHTML = "00:00:00";
}
if (status == 1) {
setTimeout(function() {
time++;
var min = Math.floor(time/100/60);
var sec = Math.floor(time/100);
var mSec = time % 100;
if(min < 10) {
min = "0" + min;
}
if (sec >= 60) {
sec = sec % 60;
}
if (sec < 10) {
sec = "0" + sec;
}
document.getElementById("timerLabel").innerHTML = min + ":" + sec + ":"
+ mSec;
timer();
}, 10);
}
}
function output() {
document.getElementById('timerResult').innerHTML =
document.getElementById('timerLabel').innerHTML;
}`.
The code reading data from the Mysql database.
`<div class="table">
<table>
<thead>
<tr>
<th>Vehicle name</th>
<th>Vehicle make</th>
<th>Vehicle color</th>
<th>Reg Number</th>
<th>Date</th>
<th>Time</th>
<th>Countdown</th>
<th colspan="4">Action</th>
</tr>
</thead>
<?php while ($row = mysqli_fetch_array($results)) { ?>
<tr>
<td><?php echo $row['Vehicle_name']; ?></td>
<td><?php echo $row['Vehicle_make']; ?></td>
<td><?php echo $row['Vehicle_color']; ?></td>
<td><?php echo $row['Number_plate']; ?></td>
<td><?php echo $row['Date']; ?></td>
<td><?php echo $row['Time']; ?></td>
<td><body>
<div class="container">
<div id="timerLabel">00:00:00</div>
<input type="button" value="Start" class="myButton" onclick="start()"
id="startBtn">
<input type="button" value="Stop" class="myButton" onclick="stop('<?=
$row['Number_plate']; ?>')">
<h1 id="timerResult"></h1>
</div>
<script src="timer2.js">
</script>
</body></td>
<td>
<a href="php_code.php?del=<?php echo $row['Number_plate']; ?>"
class="del_btn">Delete</a>
</td>
</tr>
<?php } ?>
</table>
</div>`.