jQuery: how do i reset the countdown timer?

Question

I have a jQuery function that is executed on the click of the redeem button. When someone clicks on the first redeem button, the timer is working fine, but for the following redeem buttons I need to refresh the page. Is there any way to reset the timer before someone clicked on the two or more redeem buttons? So the timer will start again from 15:00 for another button after the timer will reset to 00:00

Kindly check the jQuery what is the issue with timer seconds why seconds are running so fast when second time modal popup is showing?

Codepen source code

$(document).ready(function() {
  $(".redeem_btn").on("touchstart, click", function(e) {

    $('#myModal').modal('show');

    function countdown(elementName, minutes, seconds) {
      var element, endTime, hours, mins, msLeft, time;

      function twoDigits(n) {
        return (n <= 9 ? "0" + n : n);
      }

      function updateTimer() {
        msLeft = endTime - (+new Date);
        if (msLeft < 1000) {
          element.innerHTML = "countdown's over!";
          $('#myModal').modal('hide');
        } else {
          time = new Date(msLeft);
          hours = time.getUTCHours();
          mins = time.getUTCMinutes();
          element.innerHTML = (hours ? hours + ':' +
            twoDigits(mins) : mins) + ':' + twoDigits(time.getUTCSeconds());
          setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
        }
      }

      element = document.getElementById(elementName);
      endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
      updateTimer();
    }

    countdown("countdown", 15, 0);
    /*countdown( "countdown2", 100, 0 );*/

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12" style="">
            <div class="col-md-9 col-sm-12 mee" style="float: left;">
              <div class="section-products">
                <div class="row">
                  <h2 class="section-title-popup">CONGRATULATIONS</h2>
                </div>

                <div class="row">
                  <h6 class="uper-class">you have successfully redeemed your coupon for</h6>

                </div>
                <div class="row">
                  <h2 class="lower-class2">
                    Test123
                  </h2>
                </div>
                <div class="row">
                  <h2 class="lower-class">
                    test123
                  </h2>
                  <hr style="width: 50%;text-align: center;margin: 0 auto 0.5em;float: none;background-color: #2d2b2d;">
                </div>
                <div class="row">
                  <h6 class="low-class">Show this to your merchant</h6>
                </div>
              </div>
            </div>
            <div class="col-md-3 col-sm-12 you" style="float: left;">
              <p style="">This voucher will expire in <strong class="countdown" id="countdown"> 15 </strong> minutes</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Something like this?

I moved the function and use setInterval which I clear next time the function is called

let tId;

function countdown(elementName, minutes, seconds) {
  var element, endTime, hours, mins, msLeft, time;

  function twoDigits(n) {
    return (n <= 9 ? "0" + n : n);
  }

  function updateTimer() {
    msLeft = endTime - (+new Date);
    if (msLeft < 1000) {
      element.innerHTML = "countdown's over!";
      $('#myModal').modal('hide');
    } else {
      time = new Date(msLeft);
      hours = time.getUTCHours();
      mins = time.getUTCMinutes();
      element.innerHTML = (hours ? hours + ':' +
        twoDigits(mins) : mins) + ':' + twoDigits(time.getUTCSeconds());
    }
  }

  element = document.getElementById(elementName);
  endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
  clearTimeout(tId)
  tId = setInterval(updateTimer, 1000);
}


$(document).ready(function() {
  $(".redeem_btn").on("touchstart, click", function(e) {
    $('#myModal').modal('show');
    countdown("countdown", 15, 0);
    /*countdown( "countdown2", 100, 0 );*/
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>
<a href="javascript:void(0);" class="btn btn-own btn-user redeem_btn set_free_redeem_code"> Redeem Now </a>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12" style="">
            <div class="col-md-9 col-sm-12 mee" style="float: left;">
              <div class="section-products">
                <div class="row">
                  <h2 class="section-title-popup">CONGRATULATIONS</h2>
                </div>

                <div class="row">
                  <h6 class="uper-class">you have successfully redeemed your coupon for</h6>

                </div>
                <div class="row">
                  <h2 class="lower-class2">
                    Test123
                  </h2>
                </div>
                <div class="row">
                  <h2 class="lower-class">
                    test123
                  </h2>
                  <hr style="width: 50%;text-align: center;margin: 0 auto 0.5em;float: none;background-color: #2d2b2d;">
                </div>
                <div class="row">
                  <h6 class="low-class">Show this to your merchant</h6>
                </div>
              </div>
            </div>
            <div class="col-md-3 col-sm-12 you" style="float: left;">
              <p style="">This voucher will expire in <strong class="countdown" id="countdown"> 15 </strong> minutes</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>