title: Wordpress Update Javascript Stopwatch
body: <p>I have this javascript stopwatch that is working. The function is when user click start button to start and pause button to pause the stopwatch. The variable stopwatch is saved in localStorage and when user refresh the website and click start again the stopwatch continue from the last stopwatch time + 1; The first timer is working, but I will have an array of the same containers, fetching from a Database containing stopwatch time. The problem is with my loop. How can I add the timer for each individual timer container and continue from the time it was last saved + 1 and continue from there. I am providing an example maybe someone can help me.</p>
  <p>HTML</p>
  <pre><code>&lt;div class=&quot;c-add-task-main-container&quot;&gt;
      &lt;h2 class=&quot;c-add-task-title&quot;&gt;Time Tracker&lt;/h2&gt;
      &lt;button class=&quot;start&quot;&gt;Start&lt;/button&gt;
      &lt;button class=&quot;pause&quot;&gt;Pause&lt;/button&gt;
      &lt;button class=&quot;clear&quot;&gt;Clear&lt;/button&gt;
      &lt;div class=&quot;output&quot;&gt;00:34:21&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;c-add-task-main-container&quot;&gt;
      &lt;h2 class=&quot;c-add-task-title&quot;&gt;Time Tracker&lt;/h2&gt;
      &lt;button class=&quot;start&quot;&gt;Start&lt;/button&gt;
      &lt;button class=&quot;pause&quot;&gt;Pause&lt;/button&gt;
      &lt;button class=&quot;clear&quot;&gt;Clear&lt;/button&gt;
      &lt;div class=&quot;output&quot;&gt;21:56:22&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;c-add-task-main-container&quot;&gt;
      &lt;h2 class=&quot;c-add-task-title&quot;&gt;Time Tracker&lt;/h2&gt;
      &lt;button class=&quot;start&quot;&gt;Start&lt;/button&gt;
      &lt;button class=&quot;pause&quot;&gt;Pause&lt;/button&gt;
      &lt;button class=&quot;clear&quot;&gt;Clear&lt;/button&gt;
      &lt;div class=&quot;output&quot;&gt;32:47:35&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;c-add-task-main-container&quot;&gt;
      &lt;h2 class=&quot;c-add-task-title&quot;&gt;Time Tracker&lt;/h2&gt;
      &lt;button class=&quot;start&quot;&gt;Start&lt;/button&gt;
      &lt;button class=&quot;pause&quot;&gt;Pause&lt;/button&gt;
      &lt;button class=&quot;clear&quot;&gt;Clear&lt;/button&gt;
      &lt;div class=&quot;output&quot;&gt;11:29:03&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;c-add-task-main-container&quot;&gt;
      &lt;h2 class=&quot;c-add-task-title&quot;&gt;Time Tracker&lt;/h2&gt;
      &lt;button class=&quot;start&quot;&gt;Start&lt;/button&gt;
      &lt;button class=&quot;pause&quot;&gt;Pause&lt;/button&gt;
      &lt;button class=&quot;clear&quot;&gt;Clear&lt;/button&gt;
      &lt;div class=&quot;output&quot;&gt;04:01:14&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>    let showTime = document.querySelector(&quot;.output&quot;);
      let startTimeButton = document.querySelector(&quot;.start&quot;)
      let pauseTimeButton = document.querySelector(&quot;.pause&quot;)
  
      let seconds = 0;
      let interval = null;
      if (localStorage.getItem(&quot;stopwatchSeconds&quot;) != null) {
          seconds = parseInt(localStorage.getItem(&quot;stopwatchSeconds&quot;));
      }
  
      const timer = () =&gt; {
          seconds++;
  
          localStorage.setItem(&quot;stopwatchSeconds&quot;, seconds);
  
  
          // Get hours
          let hours = Math.floor(seconds / 3600);
          // Get minutes
          let minutes = Math.floor((seconds - hours * 3600) / 60);
          // Get seconds
          let secs = Math.floor(seconds % 60);
  
          if (hours &lt; 10) {
              hours = `0${hours}`;
          }
          if (minutes &lt; 10) {
              minutes = `0${minutes}`;
          }
          if (secs &lt; 10) {
              secs = `0${secs}`;
          }
  
          showTime.innerHTML = `${hours}:${minutes}:${secs}`;
  
      };
  
      startTimeButton.addEventListener(&quot;click&quot;, () =&gt; {
          pauseTimeButton.style.display = &quot;block&quot;;
          startTimeButton.style.display = &quot;none&quot;;
          console.log(&quot;START TIME CLICKED&quot;);
  
          if (interval) {
              return;
          }
  
          interval = setInterval(timer, 1000);
      });
  
      // Pause function
      pauseTimeButton.addEventListener(&quot;click&quot;, () =&gt; {
          pauseTimeButton.style.display = &quot;none&quot;;
          startTimeButton.style.display = &quot;block&quot;;
          console.log(&quot;PAUSE TIME CLICKED&quot;);
          clearInterval(interval);
          interval = null;
  
      });
  </code></pre>