multiple counter on the page restart it

Question

Can you help me with restarting a counter when it stops?

I have managed to make a countdown, but the counter is now supposed to restart by clicking on a button.

Does anybody have a solution to my problem?

Below is my javascript code:

<script type="text/javascript">
$(document).ready(function(){
    $('[data-tempsctrl]').each(function() {     
        var $this = $(this);
        var idctrl = $( this ).data( 'idctrl');
        var tempsctrl = $( this ).data( 'tempsctrl');
        var timer2 = tempsctrl;

        countdown = setInterval(function(){ 
            var timer = timer2.split(':');
            var hours = parseInt(timer[0], 10);
            var minutes = parseInt(timer[1], 10);
            var seconds = parseInt(timer[2], 10);

            --seconds;
            minutes = (seconds < 0) ? --minutes : minutes;
            hours = minutes < 0 ? --hours : hours;

            if (hours < 0) {
                return;
            }

            seconds = (seconds < 0) ? 59 : seconds;
            seconds = (seconds < 10) ? '0' + seconds : seconds;
            minutes = (minutes < 0) ? 59 : minutes;
            minutes = (minutes < 10) ? '0' + minutes : minutes;
            timer2 = hours + ':' + minutes + ':' + seconds;

            $('.countdown', $this).html(timer2);

            if (hours-- == 0 && minutes-- == 0 &&  seconds-- == 0 ) {
                $('.countdown', $this).html('stop'); 
            }
        }, 1000);
    });  

    $("#restartcount").click(function(){
        setInterval(function() {
            // re start the counter ?
        }, 1000);
    });
});
</script>

Below is my HTML that displays the counter:

<table>  
  <tr data-tempsctrl="1:00:00" >
    <td><div  class="countdown"></div></td>
    <td><button  data-idctrl="1" id="restartcount">restart</button></td>
  </tr>
  <tr data-tempsctrl="0:30:00"  >
    <td><div  class="countdown"></div></td>
    <td><button data-idctrl="2" id="restartcount">restart</button></td>
  </tr>
</table>

Many thanks

Answer 1

$(document).ready(function() {
  //make time under 10 appear as 0#
  function formatTime (time) {
    return time < 10 ? '0'+ time : time;
  }
  
  function startCountdown (countdownRow) {
    var $this = $(countdownRow);
    var startTime = $this.data('tempsctrl');
    var seconds = 0;
    var timeTokens = startTime.split(':');

    //convert everything to seconds as that is the decrement level
    seconds += parseInt(timeTokens[0], 10) * 60 * 60;
    seconds += parseInt(timeTokens[1], 10) * 60;
    seconds += parseInt(timeTokens[2], 10);

    var countdown = setInterval(function() {
      --seconds;
      
      //if time is left, format the output
      if (seconds > 0) {
        $this.find('.countdown').html(
          formatTime(Math.floor(seconds / 3600)) +':'+ formatTime(Math.floor((seconds % 3600) / 60)) +':'+ formatTime(Math.floor(seconds % 60))
        );
      } else {
        //if no time is left, show stop and clear the interval
        $this.find('.countdown').html('stop');
        clearInterval(countdown);
      }
    }, 1000);
    //attach the interval to the row so we can get it later to restart
    $this.data('countdown', countdown);
  }

  $('[data-tempsctrl]').each(function() {
    startCountdown(this);
  });
  
  $('.restartcount').on('click', function(){
    var row = $(this).closest('tr');
    var countdown = $(row).data('countdown');
    
    clearInterval(countdown);
    $(row).find('.countdown').html('');
    startCountdown(row);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-tempsctrl="2:00:00">
    <td>
      <div class="countdown"></div>
    </td>
    <td><button class="restartcount">restart</button></td>
  </tr>

  <tr data-tempsctrl="1:30:00">
    <td>
      <div class="countdown"></div>
    </td>
    <td><button class="restartcount">restart</button></td>
  </tr>

  <tr data-tempsctrl="0:00:10">
    <td>
      <div class="countdown"></div>
    </td>
    <td><button class="restartcount">restart</button></td>
  </tr>
</table>