title: Make div with sessionStorage data auto-update as data changes, not on page refresh
body: <p>I'm trying to build something analogous to a shopping cart. On the page, a user can click any number of <code>inventory</code> items, upon click, these items get added to <code>sessionStorage</code>. On a different part of the page, I then show the <code>sessionStorage</code> so that the user can modify the cart as needed. </p>
  
  <p>Right now I have a problem where the <code>sessionStorage</code> works in that it has all the data, but if I click a bunch of items, it's not until I refresh the page that I see the data reflected in my cart. This defeats the entire purpose of me trying to learn Javascript, so hoping there's an answer to allow auto-updates so a user can add to/remove from cart without page refreshes.</p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="col-xs-2" id="cart"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
    var cart = [];
      $(document).on("click", "#inventory", function() { 
  
        //if statement so that it pushes ONLY if it doesn't already exist in cart
        cart.push({
          inventory_id: $(this).data('inventory_id'),
          inventory_name: $(this).data('inventory_name'),
          inventory_description: $(this).data('inventory_description'),
          lender_email: $(this).data('lender_email')
        });
        sessionStorage.setItem("cart", JSON.stringify(cart));
      });
  
    $('#cart').html(sessionStorage.getItem("cart"));
  &lt;/script&gt;
  </code></pre>