title: jQuery.countdown on timer finish start a new timer with button
body: <p>I am trying to make a countdown timer based on the Pomodoro technique where you work for 25 minutes then take a break.  I am writing the page in Javascript and jQuery using the jQuery.countdown and moment.js plugins.  I have it so that when a user hits the start button it counts down 25 minutes but then after that timer is finished I want there to have two break options restart the timer again.  Then it just goes in a cycle 25mins->break->25 mins->break->etc depending on what button the user pushes at the end of countdown.</p>
  
  <p>How it is now the buttons after the countdown is complete do nothing.  I feel like I need to reset the timer but the documentation is a little difficult to through for jQuery.countdown.</p>
  
  <pre><code> &lt;div class="container-fluid"&gt;
   &lt;p&gt;start timer and then get to work&lt;/p&gt;
   &lt;div class="container-fluid"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;span id="timer"&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/br&gt;
      &lt;div class="containter-fluid" id="timer-buttons"&gt;
        &lt;span&gt;&lt;button type="button" class="btn btn-secondary btn-sm" id="btn-start-timer"&gt;start timer&lt;/button&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;script type="text/javascript"&gt;
  
    var $timer = $('#timer');
    var $timerButtons = $('#timer-buttons');
  
    $('#btn-start-timer').click(function(event) {
      // get the current time when button clicked
      var currentTime = moment();
      // add 25 minutes for interval
      var timerInterval = moment(currentTime).add(25.0, 'm');
      // format interval
      var timerIntervalFormatted = moment(timerInterval).format('YYYY/MM/DD HH:mm:ss');
  
      // start the 25 minute timer and at the end popup two buttons for breaks
      $timer.countdown(timerIntervalFormatted, function(event) {
        $(this).html(event.strftime('%M:%S'));
      }).on('finish.countdown', function() {
        $timerButtons.html('&lt;span&gt;&lt;button type="button" class="btn btn-secondary btn-sm" id="btn-short-break"&gt;short break&lt;/button&gt;&lt;/span&gt; &lt;span&gt;&lt;button type="button" class="btn btn-secondary btn-sm" id="btn-long-break"&gt;long break&lt;/button&gt;&lt;/span&gt;');
      });
    });
  
    $('#btn-short-break').click(function(event) {
      var currentTime = moment();
      var shortBreak = moment(currentTime).add(1.0, 'm');
      var shortBreakFormatted = moment(shortBreak).format('YYYY/MM/DD HH:mm:ss');
  
      $timer.countdown(shortBreakFormatted, function(event) {
        $(this).html(event.strftime('%-M:%S'));
      }).on('finish.countdown', function() {
        $timerButtons.html('&lt;span&gt;&lt;button type ="button" class="btn btn-secondary btn-sm" id="btn-start-timer"&gt;start timer&lt;/button&gt;&lt;/span&gt;');
  
      });
    });
  
    $('#btn-long-break').click(function(event) {
      var currentTime = moment();
      var longBreak = moment(currentTime).add(2.0, 'm');
      var longBreakFormatted = moment(longBreak).format('YYYY/MM/DD HH:mm:ss');
  
      $timer.countdown(longBreakFormatted, function(event) {
        $(this).html(event.strftime('%-M:%S'));
      }).on('finish.countdown', function() {
        $timerButtons.html('&lt;span&gt;&lt;button type ="button" class="btn btn-secondary btn-sm" id="btn-start-timer"&gt;start timer&lt;/button&gt;&lt;/span&gt;');
  
      });
    });
  
  &lt;/script&gt;
  </code></pre>