Adding Countdown Timer to quiz

<script>
function countdown(targetElement) {
    let storedTime = localStorage.getItem("timer-remaining-time");
    let endTime = storedTime ? parseInt(storedTime, 10) : Date.now() + 10 * 60 * 2000; // Default 10 minutes

    function tick() {
        let remainingTime = Math.max(0, Math.floor((endTime - Date.now()) / 1000));
        let minutes = Math.floor(remainingTime / 60);
        let seconds = remainingTime % 60;

        // Store the remaining time
        localStorage.setItem("timer-remaining-time", endTime);

        let minutesEl = $(targetElement).data('text-counter-minutes');
        let secondsEl = $(targetElement).data('text-counter-seconds');

        if (minutesEl) {
            $(targetElement).html('<img src="/projects/clever/time-icon-white.png" alt="Timer" class="timer-icon"> ' + minutes);
        } else if (secondsEl) {
            $(targetElement).html((seconds < 10 ? '0' : '') + seconds);
        } else {
            targetElement.innerHTML =
                '<img src="/projects/clever/time-icon-white.png" alt="Timer" class="timer-icon"> ' +
                minutes +
                ':' +
                (seconds < 10 ? '0' : '') +
                seconds;
        }

        if (remainingTime > 0) {
            setTimeout(tick, 1000);
        } else {
            localStorage.removeItem("timer-remaining-time"); // Clear timer when finished
        }
    }

    tick();
}

setTimeout(function () {
    if (!$('[data-timer]').length) {
        $('.quiz__circle').after(
            '<div style="margin-left: auto; width: 100px; color: var(--text-primary); display: flex; align-items: center; gap: 5px;" data-timer>' +
                '<span data-text-counter="10" data-text-counter-minutes="true"></span>:<span data-text-counter="10" data-text-counter-seconds="true"></span>' +
            '</div>'
        );

        $('[data-text-counter]').each(function (index, el) {
            countdown(el);
        });
    }
}, 500);
</script>

<style>
[data-timer] {
    font-size: 16px;
    font-weight: bold;
    color: #ff0000;
    background: #575783;
    padding: 5px 10px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 5px;
}

.timer-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

[data-text-counter-minutes] {
    display: flex;
    align-items: center;
    gap: 5px;
}

[data-text-counter-seconds] {
    font-size: 16px;
}
</style>