Unable to clearInterval(), variable showing undefined

Question

I am trying to achieve simple start and stop countdown in 30 seconds with a button to stop early if required. With start it is working fine but with stop it is not working, while checking I found the setInterval Id =1 which is started is showing null when clearInterval.

var downloadTimer = null;
function countTime(dte) {
  var timeleft = 30;
  var downloadTimer = setInterval(function() {
    if (timeleft <= 1) {
      clearInterval(downloadTimer);
      this.downloadTimer = null;
      document.getElementById("titt").innerHTML = "0";
    } else {
      document.getElementById("titt").innerHTML = timeleft;
    }
    timeleft -= 1;
  }, 1000);
  console.log(downloadTimer);
}
function stopTimer() {
  console.log(downloadTimer);
  clearInterval(downloadTimer); 
}
$('#gamestart').click(function() {
  $("#gamestart").html('Next');
  countTime(30);
  var opt = $('#sort').val();
  if (opt === 'bychar') {
    var chararr = ['x','y','z'];
    var val = random(1, 3);
    document.getElementById('char').innerText = 'xyz Value is: ' + chararr[val];
  } else {
    var wordarr = ['a','b','c'];
    var val = random(1, 3);
    document.getElementById('char').innerText = 'abc value is: ' + wordarr[val];
  }
});
function random(mn, mx) {
  return Math.floor((Math.random() * mx) + mn);
}