JSFiddle - React, Tailwind, and code Playground
HTML
<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>
CSS
.btn1,.btn2,.btn3,.btn4 {
background: green;
color: white;
border: 0;
border-radius: 5px;
padding: 15px;
cursor: pointer;
}
.disabled {
background: grey !important;
cursor: not-allowed !important;
pointer-events: none;
}
JavaScript
$('.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);
});