JSFiddle - React, Tailwind, and code Playground

by Snaptik

HTML

<button class="showButton">Start Countdown</button>
<div class="countdown" data-time="300"></div>
<div class="countdown" data-time="300"></div>
<!-- Add more countdown elements as needed -->
<script>
    // Function to start countdown on button click
    function startCountdown(element) {
        // Get the initial countdown time from data attribute
        var countdownTime = parseInt(element.getAttribute('data-time'));

        // Function to update countdown timer
        function updateCountdown() {
            var minutes = Math.floor(countdownTime / 60);
            var seconds = countdownTime % 60;
            if (countdownTime === 0) {
                element.innerHTML = "<span class='qrnotice'><br>ვაუჩერის ვადა ამოიწურა :(</span>";
                element.style.color = "#e80f00";
            } else {
                element.innerHTML = "<span class='qrnotice'><br>ვადის ამოწურვამდე დარჩენილია: " + minutes + "m " + seconds + "s</span>";
                countdownTime--;
                setTimeout(updateCountdown, 1000);
            }
        }

        // Start the countdown
        updateCountdown();
    }

    // Find the button element
    var showButton = document.querySelector('.showButton');

    // Add a click event listener to the button
    showButton.addEventListener('click', function () {
        // Find all elements with the 'countdown' class and start countdown for each
        document.querySelectorAll('.countdown').forEach(startCountdown);
    });
</script>