title: How to save multiple items to localStorage in jquery
body: <p>I am having trouble saving multiple items to the DOM local storage. Everytime i add an item it saves it eprfectly well after page reload but when i add a new item it overwrites the previous one. How can i save every item i add to the localStorage?</p>
  
  <p>JS</p>
  
  <pre><code>var prodname, prodprice, proddescript;
  var savedContent = $('.container')        
  
  var content = [];   
  
  
  $('.addform').fadeOut(0);
      i = 0;
      $('.addproduct').click(function() {
      $('.addform').fadeIn(300);    
  });    
  
  $('.addtostore').click(function(e) {
      prodname = $('.prodname').val();
      prodprice = $('.prodprice').val();
      proddescript = $('.proddescript').val();
  $('.container').append('&lt;div class="prodcont"&gt;&lt;img src="https://picsum.photos/20'+(++i)+'/300"/&gt; 
      &lt;h4&gt;'+prodname+'&lt;/h4&gt;&lt;p&gt;$'+prodprice+'.00&lt;/p&gt;&lt;span&gt;'+proddescript+'&lt;/span&gt;&lt;button&gt;Add to 
       cart&lt;/button&gt;&lt;/div&gt;');  
       content[i] = '&lt;div class="prodcont"&gt;&lt;img src="https://picsum.photos/20'+(++i)+'/300"/&gt; 
       &lt;h4&gt;'+prodname+'&lt;/h4&gt;&lt;p&gt;$'+prodprice+'.00&lt;/p&gt;&lt;span&gt;'+proddescript+'&lt;/span&gt;&lt;button&gt;Add to 
       cart&lt;/button&gt;&lt;/div&gt;'; 
        localStorage.setItem('content', JSON.stringify(content));
  $('.addform').fadeOut(300);
       e.stopImmediatePropagation();
  });
  
  
  var saved = JSON.parse(localStorage.getItem("content"));
  
  savedContent.append(saved);  
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here's a link to download the project, so you can demo it and see the problem. To add products, just click the + button on the header nav bar.
  Thanks!</p>
  
  <p>Download Link: <a href="https://scorpionedge.com/version2/version2.zip" rel="nofollow noreferrer">https://scorpionedge.com/version2/version2.zip</a></p>