How to display date validation value in html?

Question

I have all the functions that I need, but I can't connect them to displaying a message on the screen it should look like this In place of the red text, the necessary message is just displayed. This text has a tag reserved . I will be eternally grateful for help...

This is a piece of html date code:

<label class="popup-date-label">
    <span class="popup-label-text">Дата заезда:</span>
    <input type="text" id="firstDate" class="popup-first-date" value="27 апреля 2020">
    <span class="date-state" id="firstDateState"></span>
</label>
<label class="popup-date-label">
    <span class="popup-label-text">Дата выезда:</span>
    <input type="text" id="secondDate" class="popup-second-date" value="1 сентября 2023">
    <span class="date-state" id="secondDateState"></span>
</label>

So these are JS functions that return correct data:

function getAvailability(dateInput) {
    let answer;
    const day = new Date().getDate();
    const month = new Date().getMonth();
    const year = new Date().getFullYear();
    const currentDate = [day, month, year];
    let userDate = dateInput.split(' ');
    let Months = [
        'январ',
        'феврал',
        'март',
        'апрел',
        'ма',
        'июн',
        'июл',
        'август',
        'сентябр',
        'ноябр',
        'декабр',
    ];
    userDate = [
        parseInt(userDate[0], 10),
        Months.indexOf(userDate[1].slice(0, -1)) + 1,
        parseInt(userDate[2], 10)
    ];

    answer = "succes"
    for (let i = 2; i >= 0; i--) {
        if (currentDate[i] > userDate[i]) {
            answer = "dateMismatch";
            break
        }
    }

    return answer;
}

function createMessage(answer) {
    let message;

    if (answer == "succes") {
      message = "На эти даты есть свободные номера. Пока есть.";
    } else if (answer == "dateMismatch") {
      message = "Мы не можем отправить вас в прошлое.";
    }

    return message;
}


const firstDate = document.getElementById("#firstDate");
const secondDate = document.getElementById("#secondDate");
const firstDateState = document.getElementById("#firstDateState");
const secondDateState = document.getElementById("secondDateState");

Answer 1

 <form>
   <input id="topInput">
   <input id="bottomInput">

   <span id="status"></span>
   <button type="submit">Submit</button>
</form>

function validateDate(e) {
    // extract elements
    const userInput = document.getElementById('topInput');
    const status = document.getElementById('status');
    // add condition to render status
    if (userInput.value.length !== 0) {
        // render status
        status.textContent = 'Valid';
        console.log('valid');
        // submit form
        return true;
    }
    else {
        // prevent form from reloading
        e.preventDefault();
        status.textContent = 'Invalid';
        console.log('invalid');
        // do not submit form
        return false;
    }
}

// invoke function on submit
const form = document.querySelector('form')
form.addEventListener('submit', validateDate);