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>`.

In the browser the table looks like this.Vehicle registration table

0 Answers