title: How do I stack mutiple notes on top of each other with local storage in javascript?
body: <p>I am making a javascript note-taking app. Here is the code so far:
  Javascript is:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var inputValue = document.getElementById('myInput');
  var input = document.getElementById('myInput');
  var button = document.getElementById('myButton');
  
  function run(){
  localStorage.setItem('inputer', inputValue);
  let p = document.createElement('p');
  p.id = 'content';
  p.innerHTML = inputValue.value;
  document.body.appendChild(p);
  }
  
  
  
  window.addEventListener('load', () =&gt; {
  var savedUserData = localStorage.getItem('inputer');
  var p2 = document.createElement('p');
  p2.innerHTML = savedUserData.value;
  document.body.appendChild(p2)
  });</code></pre>
  </div>
  </div>
  </p>
  <p>And the HTML is:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id = "myInput"&gt;
  &lt;button id = "myButton" onclick = "run();"&gt;
  Take note:
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>It works by stacking notes on top of notes and saving the data in local storage. But for some reason, it does not save the notes correctly. It will stack them but not save them. Also, it says this: &quot;undefined&quot;. I would assume that that is because it checks the value of the input first before anything has been in it. And as I am writing  this I am thinking that my idea is not going to work because there is mutiple input. So how would I fix this so this so the user can stack notes ontop of notes, and they will all be stored in local storage and come back to the user when the page reloads? Thank you and have a good day!</p>