I have the following two functions:

// COUNTDOWN TIMER FUNCTION
function refillTimer(theTime) {
  var timer = new Date().getTime() + theTime;
  $('#refillTimer').countdown(timer).on('update.countdown', function(event) {
    $(this).show();
    var $this = $(this);
    if(event.elapsed){
      $this.html(event.strftime('0:0:0'));
    }else{
      $this.html(event.strftime('<strong>%S</strong>'));
    }
  }).on('finish.countdown', function(){
    $(this).hide();
  });
}

// ON SWIPE PERFORM ACTION
async function swipeAction(currentElementObj, swipeType) {
  var cardId = currentElementObj.getAttribute("value");
  var dataString = {
    card: cardId,
    swipe: swipeType
  };
  let response = await new Promise((resolve, reject) => {
    try {
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "processes/swipe.php", true);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.responseType = "json";
      xhr.send(JSON.stringify(dataString));
      xhr.onreadystatechange = function () {
        let resObj = xhr.response;
        if(xhr.readyState == 4 && xhr.status == 200 && resObj) {
          $('#content').modal('show');
          refillTimer(resObj.nextswipe); // resObj.nextswipe returns 37000 seconds
        }
      };
    }catch(e){
      reject(e.toString());
    }
  });
}

Here in the above code as you can see I have a countdown timer that I am trying to use in swipeAction() function. The problem here is that the timer is not working as per the input provided. Say for example, the input passed in the refilTImer(theTime) function as theTime is 37000. Therefore, the the function should take 37000 seconds, convert it to HH:MM:SS and start the display of countdown accordingly. Simple as that. However, at every call the countdown timer starts at 37 seconds. The seconds passed it 43650, the timer countdowns from 43 seconds only. I don't understand why this is happening. What can be the solution here?