JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

HTML

<button type="button" id="resendBtn" class="btn btn-sm btn-warning">
  <span id="titleSpan">Send OTP</span>
  <span id="countSpan"></span>
</button>

<button type="button" id="resetBtn" class="btn btn-sm btn-warning">
  <span id="titleSpan">Reset</span>
  <span id="countSpan"></span>
</button>

JavaScript

$(document).ready(function(){
	alert("hello");
	
	$('#resendBtn').click(function(e){
		e.preventDefault();
		startCountDown(90);
	});
	
	$('#resetBtn').click(function(e1){
		e1.preventDefault();
		startCountDown(1);
	});
});

function startCountDown(count) {
        var spn1 = $("#countSpan");
        var spn2 = $("#titleSpan");
        var btn = $("#resendBtn");

        btn.prop('disabled', true);
        spn2.text("Time left to Resend OTP ");

        //var count = 90; // Set count
        var timer = null; // For referencing the timer

        (function countDown() {
            // Display counter and start counting down
            spn1.text(count);
						timer = clearTimeout(countDown);
								clearInterval(countDown);

            // Run the function again every second if the count is not zero
            if (count !== 0) {
                timer = setTimeout(countDown, 1000);
                count--; // decrease the timer
            } else {
                // Enable the button
								
                btn.prop('disabled', false);
                spn2.text("Resend OTP");
            }
        }());
    }