If you want to resend the OTP after the interval of 30sec, you can try this code.
If there are some changes done by your side then it will properly work.
Change id, class, and model as per your needs:-
Button 1:-
<button type="button" class="btn btn-primary btn-sm"Â data-toggle="modal" data-target="#myModal">Example</button> <button type="button" class="btn btn-primary btn-sm btn-with-icon" id="get_otp"> Resend OTP </button> <span id="countdownTimer" style="color: red; display: none;"></span>
Script Section:-
Note:- Include the Jquery CDN
<script>
// Get references to the "Approve" and "Get OTP Again" buttons
const approveButton = document.querySelector('.btn[data-target="#myModal"]');
const getOtpButton = document.getElementById('get_otp');
// Set an initial state for the "Get OTP Again" button
let getOtpButtonVisible = true;
// When the "Approve" button is clicked, hide the "Get OTP Again" button for 30 seconds
approveButton.addEventListener('click', () => {
getOtpButtonVisible = false;
getOtpButton.style.display = 'none';
let seconds = 30;
const display = document.createElement('span');
display.style.color = 'red';
display.style.fontSize = '16px';
getOtpButton.parentNode.insertBefore(display, getOtpButton);
const countdown = setInterval(() => {
seconds--;
if (seconds === 0) {
clearInterval(countdown);
display.parentNode.removeChild(display);
getOtpButtonVisible = true;
getOtpButton.style.display = 'inline-block';
} else {
display.textContent = "Resend OTP after " + seconds + " sec";
}
}, 1000);
});
// When the "Get OTP Again" button is clicked, hide it for 30 seconds
getOtpButton.addEventListener('click', () => {
getOtpButtonVisible = false;
getOtpButton.style.display = 'none';
let seconds = 30;
const display = document.createElement('span');
display.style.color = 'red';
display.style.fontSize = '16px';
getOtpButton.parentNode.insertBefore(display, getOtpButton);
const countdown = setInterval(() => {
seconds--;
if (seconds === 0) {
clearInterval(countdown);
display.parentNode.removeChild(display);
getOtpButtonVisible = true;
getOtpButton.style.display = 'inline-block';
} else {
display.textContent = "Resend OTP after " + seconds + " sec";
}
}, 1000);
});
// Periodically check if the "Get OTP Again" button should be visible
setInterval(() => {
if (getOtpButtonVisible) {
getOtpButton.style.display = 'inline-block';
} else {
getOtpButton.style.display = 'none';
}
}, 1000);
</script>