DIFÍCIL: Botão, Contador regressivo, javascript, Onclick

[ronaldojsp 0]

Olá, estou usando esses botões no meu projeto,

 <button class="btn1" onclick="dispara('c1')">Clique aqui</button>
<span id="c1" inicial="1"></span>
 <button class="btn2" onclick="dispara('c2')">Clique aqui</button>
<span id="c2" inicial="2"></span>
 <button class="btn3" onclick="dispara('c3')">Clique aqui</button>
<span id="c3" inicial="3"></span>
 <button class="btn4" onclick="dispara('c4')">Clique aqui</button>
<span id="c4" inicial="3600"></span>

Cada um deles com um tempo diferente,

$('.btn1').click(function() {

  var button = $(this);

  button.addClass('disabled').text('Aguarde...');

  setTimeout(function() {
    button.removeClass('disabled').text('Clique aqui');
    
    /* 1min. */
  }, 60000);
});
$('.btn2').click(function() {

  var button = $(this);

  button.addClass('disabled').text('Aguarde...');

  setTimeout(function() {
    button.removeClass('disabled').text('Clique aqui');
    
    /* 2min. */
  }, 120000);
});
$('.btn3').click(function() {

  var button = $(this);

  button.addClass('disabled').text('Aguarde...');

  setTimeout(function() {
    button.removeClass('disabled').text('Clique aqui');
    
    /* 3min. */
  }, 180000);
});
$('.btn4').click(function() {

  var button = $(this);

  button.addClass('disabled').text('Aguarde...');

  setTimeout(function() {
    button.removeClass('disabled').text('Clique aqui');
    
    /* 1h. */
  }, 3600000);
}); 

Visualizar botões aqui: https://jsfiddle.net/4h3pnL26/10/

Minhas Questões são as seguintes,

1 - quando eu atualizo a pagina os botões voltam a ficar habilitados, que alterações devo fazer pra arrumar?

2 - como fazer cada botão iniciar um contador regressivo de acordo com seus respectivos tempos? (c1, c2, c3 e c4)

3 - como seria o código desse contador regressivo?

Desde já eu agradeço...

[William Bruno 1501]

1. use cookies

2. use variáveis e elementos diferentes para cada botão

3. http://wbruno.github.io/examples/time-counter/