How can I put my countdown timer letters below the timer-CodePudding

For example: 1 23 3 59 d h m s

how can I do it with my existing code?

my code:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>      
    <h2 id="countdown"></h2>  
    <script src="main.js"></script>
</body>
</html>

main.js

CountDownTimer('06/15/2022 07:30 PM', 'countdown');

function CountDownTimer(dt, id) {
    let end = new Date(dt);
    let _second = 1000;
    let _minute = _second * 60;
    let _hour = _minute * 60;
    let _day = _hour * 24;
    let timer;

    function showRemaining() {
        let now = new Date();
        let distance = end - now;
        if (distance < 0) {
            clearInterval(timer);
            document.getElementById(id).innerHTML = 'The event started!';
            
            return;
        }
        
        let days = Math.floor(distance / _day);
        let hours = Math.floor((distance % _day) / _hour);
        let minutes = Math.floor((distance % _hour) / _minute);
        let seconds = Math.floor((distance % _minute) / _second);

        document.getElementById(id).innerHTML = days;
        document.getElementById(id).innerHTML  = hours;
        document.getElementById(id).innerHTML  = minutes;
        document.getElementById(id).innerHTML  = seconds;
    }

    timer = setInterval(showRemaining, 1000);

}

I was be able to get it side by side with letters but not below every timer... BTW, I'm new to JS.

CodePudding user response：

CountDownTimer('06/15/2022 07:30 PM', 'countdown');

function CountDownTimer(dt, id) {
    let end = new Date(dt);
    let _second = 1000;
    let _minute = _second * 60;
    let _hour = _minute * 60;
    let _day = _hour * 24;
    let timer;

    function showRemaining() {
        let now = new Date();
        let distance = end - now;
        if (distance < 0) {
            clearInterval(timer);
            document.getElementById(id).innerHTML = 'The event started!';
            
            return;
        }
        
        let days = Math.floor(distance / _day);
        let hours = Math.floor((distance % _day) / _hour);
        let minutes = Math.floor((distance % _hour) / _minute);
        let seconds = Math.floor((distance % _minute) / _second);

        document.getElementById(id).innerHTML = days  " ";
        document.getElementById(id).innerHTML  = hours   " ";
        document.getElementById(id).innerHTML  = minutes  " ";
        document.getElementById(id).innerHTML  = seconds  " <br/>";
        
        document.getElementById(id).innerHTML  = "D ";
        document.getElementById(id).innerHTML  = "M ";
        document.getElementById(id).innerHTML  = "H ";
        document.getElementById(id).innerHTML  = "S ";
    }

    timer = setInterval(showRemaining, 1000);

}

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>      
    <h2 id="countdown"></h2>  
    <script src="main.js"></script>
</body>