Почему локальное хранилище возвращает только неопределенное значение, а не то, что пользователь вводит в текстовой области?

Question

Мне трудно понять, почему в моем коде он не будет возвращать то, что пользователь вводит в текстовую область, когда страница обновляется. Если в текстовой области пользователь ставит задачу типа «Утренний запуск», а затем нажимает кнопку «Сохранить», «Утренний запуск» выглядит нормально, но как только я обновляю sh страницу, она стирается. Я боролся с локальным хранилищем, что я не могу понять, спасибо за любую помощь. Вот мой код:

function getLocalStorage(key) {
    let value = localStorage.getItem(key);
    if (value) {
        $(`#text${key}`).text(value);
    }
}

function dayPlanner() {
    for (let i = 9; i < 18; i++) {

        $('.container').append($(`<div data-time=${i} id='${i}'>`));
        $('.container').append($('<div class="col-sm-2"> <p class="workHour">' + timeDisplay(i) + '</p>'));
        $('.container').append($(`<div class="col-sm-8"> <textarea class= "userInput" id=text${i} placeholder="Add your event here..."></textarea>`));
        $('.container').append($(`<div class="col-sm-2"><button class="saveBtn" id=${i}><i class="fas fa-save"></i></button>`));

        getLocalStorage(i)
    }
}

dayPlanner();

var saveBtn = $('.saveBtn');

saveBtn.on('click', function(){
    let eventId = $(this).attr('id');
    let eventText = $('.userInput').val();
    localStorage.setItem(eventId, eventText);
    console.log('button clicked');
});