Как сделать множественный ввод с помощью innerhtml и локального хранилища?

---

Я делаю приложение для заметок:
Базовый HTML:

  <input type = "text" id = "noteinput">
     <button id = "takenote">Add</button>
<b<h1 id = "print"></h1>

Вот вам и javascript:

var takeNote = document.getElementById('takenote');

takeNote.addEventListener('click', () =>{
    var date = Date();
var post = document.getElementById("noteinput").value;
        localStorage.setItem('userInputValue',post)
    document.getElementById("print").innerHTML = `Note to self: ${post}`;
});  
    window.addEventListener('load',()=>{
        var savedUserData = localStorage.getItem('userInputValue');
        document.getElementById("print").innerHTML = savedUserData;
 
 
});

Он принимает пользовательский ввод и отображает его на экране, даже после перезагрузки страницы.
Но мой вопрос заключается в том, как мне сделать несколько входов и сложить этот вход поверх последнего?

Что я уже пробовал:

Я действительно не знаю, что попробовать, так что, пожалуйста, помогите.
Спасибо!

---