How do I do multiple input with innerhtml and local storage?

See more:

Javascript

HTML

I am making a note taking app:
Basic HTML:

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

Here is the javascirpt:

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;
 
 
});

It takes the user input and displays it on the screen, even after the page has been reloaded.
But, my question is, how do I do multiple input and stack that input on top of the last?

What I have tried:

I really dont know what to try, so please help.
Thanks!