Multiuse and reusable JavaScript countdown timer

Question

I am trying to create a countdown timer that can be used for an infinate number of uses on a page, and one I can reuse just by add a class to a span called 'timer'.

I have the following countdown timer which works a treat, but I have to copy the code of the timer for every timer I need (which isn't great programming) and makes it impossible to reuse as much times as I need.

<script>

    $(document).ready(function() {

        timer();

        function timer() {
            var endTime = "<?php echo $planet->constructionarray[$i]['end_time']; ?>";
            var timeInSeconds = Math.floor(Date.now() / 1000);
            var timeRemaining = endTime - timeInSeconds; 

            var hours   = Math.floor(timeRemaining / 3600);
            var minutes = Math.floor((timeRemaining - (hours * 3600)) / 60);
            var seconds = timeRemaining - (hours * 3600) - (minutes * 60);

            if(seconds < 10) { seconds = "0" + seconds; } else { seconds = seconds; }
            if(minutes < 10) { minutes = "0" + minutes; } else { minutes = minutes; }
            if(hours < 10) { hours = "0" + hours; } else { hours = hours; }

            $("#timer<?php echo $i; ?>").text(hours + ":" + minutes + ":" + seconds);

            if(endTime <= timeInSeconds) { clearInterval(interval); location.reload(); }

         };

    interval = setInterval(timer, 1000);

      })(jQuery);

</script>

I have tried creating a new timer with the following code, this works, but only works on the first span on the page.

<span id="countdown_timer_sm" endtime="1567425139">TIMERTEST</span><br/>
<span id="countdown_timer_sm" endtime="1567425139">TIMERTEST</span><br/>
<span id="countdown_timer_sm" endtime="1567425139">TIMERTEST</span><br/>
<span id="countdown_timer_sm" endtime="1567925139">TIMERTEST</span>

$(document).ready(function() {
    timer();

    function timer() {

            var endTime = document.getElementById('countdown_timer_sm').getAttribute("endtime");        
            var timeInSeconds = Math.floor(Date.now() / 1000);
            var timeRemaining = endTime - timeInSeconds; 

            var hours   = Math.floor(timeRemaining / 3600);
            var minutes = Math.floor((timeRemaining - (hours * 3600)) / 60);
            var seconds = timeRemaining - (hours * 3600) - (minutes * 60);

            if(seconds < 10) { seconds = "0" + seconds; } else { seconds = seconds; }
            if(minutes < 10) { minutes = "0" + minutes; } else { minutes = minutes; }
            if(hours < 10) { hours = "0" + hours; } else { hours = hours; }

            document.getElementById('countdown_timer_sm').innerHTML = (hours + ":" + minutes + ":" + seconds);

            if(endTime <= timeInSeconds) { clearInterval(interval); location.reload(); }

    };

        interval = setInterval(timer, 1000);            

})(jQuery);

Could anyone give me some guidance please?

Answer 1

I hope it helps. I used Jquery and class instead of ids. Note you can't use the same ids and it only rendered only 1 id.

<span class="countdown_timer_sm" endtime="4567425139">TIMERTEST</span><br/>
<span class="countdown_timer_sm" endtime="1567425139">TIMERTEST</span><br/>
<span class="countdown_timer_sm" endtime="3567425139">TIMERTEST</span><br/>
<span class="countdown_timer_sm" endtime="2567425139">TIMERTEST</span>

<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>

$(function(){

$('.countdown_timer_sm').each(function(){
    $endTime = $(this).attr('endtime');
    $span = $(this);
    interval($endTime,$span);
  });

  function interval($endTime,$span){
    setInterval(
      function(){
        timer($endTime, $span);
      }, 1000);
  }

    function timer($endTime, $thisSpan){
      var timeInSeconds = Math.floor(Date.now() / 1000);
      var timeRemaining = $endTime - timeInSeconds; 
      var hours   = Math.floor(timeRemaining / 3600);
      var minutes = Math.floor((timeRemaining - (hours * 3600)) / 60);
      var seconds = timeRemaining - (hours * 3600) - (minutes * 60);
      if(seconds < 10) { seconds = "0" + seconds; } else { seconds = seconds; }
      if(minutes < 10) { minutes = "0" + minutes; } else { minutes = minutes; }
      if(hours < 10) { hours = "0" + hours; } else { hours = hours; }
      //console.log($thisSpan);
      $thisSpan.html(hours + ":" + minutes + ":" + seconds);

        if($endTime <= timeInSeconds) { 
          clearInterval(); location.reload(); 
        }
      };

})