How to get some text to display after hitting button

My Codepen

So after I hit the End Session button, I want there to be some text that shows up at the center of the page saying “Have a great day!” but its not showing up. I’ve used this same logic throughout this project, by making my buttons disappear. I would put the HTML as style = “display: none” and then display = “block” whenever I clicked a button. But for some reason its not working for this message

<div id ="message" style ="display: none">
                <h1>Have a great day!</h1>
// Gets rid of the pausePlay class and displays the middlebuttons
const options = () => {
    const $pausePlay = document.getElementsByClassName("pausePlay");
    const $middleButtons = document.getElementsByClassName("middleButtons");
    
    for (var i = 0; i < $pausePlay.length; i++) {
        $pausePlay[i].style.display = "none";
    }
    for(var i = 0; i < $middleButtons.length; i++){
        $middleButtons[i].style.display = "block";
    }

    const fiveMinButton = document.getElementById('fiveMin');
    fiveMinButton.addEventListener('click', fiveMinBreak);

    const restartButton = document.getElementById('redo');
    redo.addEventListener('click', restartTimer);

    const endSession = document.getElementById('endSess');
    endSession.addEventListener('click', endSess);

    
}
 
//  Pause button
 const handleClickPauseButton = () => {
    
    const $pauseButton = document.getElementById("pause");
   clearInterval();
   
 };
// Play button 
 const handleClickPlayButton = () => {
    alert("Play button was clicked");
    const $playButton = document.getElementById("play");

 };

//  Five minute break
 const fiveMinBreak = () => {
    
    countDown({
        minutes: 5,
        seconds: 01
           });
 }

//Restart button
const restartTimer = () => {
    initApp();
}

//End session 
const endSess = () => {
    const $middleButtons = document.getElementsByClassName("middleButtons");

    const $message = document.getElementById('message');

    for(var i = 0; i < $middleButtons.length; i++){
        $middleButtons[i].style.display = "none";
        counter.style.display = "none";
        $message.style.display = "block";
    }
    
    
   
    
    
    
}

startTimer();

i figured it out. It was the HTML all along. I had my message ID and put it outside of the middleButtons div because I was making the middleButtons div disappear the whole time