title: Dynamic content not showing/removing until page is refreshed
body: <blockquote>
    <p>I have looked at that question as it over 10yrs old. Tech changes and
    the answers on that post do not solve my problem</p>
  </blockquote>
  
  <p>I have looked at a few posts of SO, but none seem to work in my case,</p>
  
  <p><a href="https://stackoverflow.com/questions/50816524/after-refresh-page-content-is-showing">After refresh page content is showing</a> and <a href="https://stackoverflow.com/questions/16495394/dynamic-radio-buttons-as-navigation-not-working-until-page-refresh">dynamic radio buttons as navigation not working until page refresh</a> are just a few</p>
  
  <p>I append data to a div that's in a modal, the problem is when I open the modal the dynamic content does not show. Same goes for when I remove the item it still displays until I refresh the page.</p>
  
  <p>As one of the above posts state adding document does not work</p>
  
  <p>I have added all the scripts in case the issue lies somewhere in one of then</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          function removeItem(id) {
              var obj1 = JSON.parse(sessionStorage.getItem("cart")) || {};
              var items = obj1;
              for (var i = 0; i &lt; items.length; i++) {
                  if (items[i].id === id) {
                      alert(id);
                      items.splice(i, 1);
                      break;
                  }
              }
              sessionStorage.setItem("cart", JSON.stringify(obj1));
          }
  
          $('.itemsInCart').on('click', 'p.remove-item', function (e) {
              e.preventDefault();
              var val = $(".remove-item").attr('data-id');
              removeItem(val);
          });
      });
  &lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function () {
          $("#displayTotal").hide();
          $('.btnProduct').on('click', function (e) {
              e.preventDefault();
  
              var id = $(this).data("id");
              var title = $(this).data("title");
              var rawPrice = $(this).data("price");
              var cart = sessionStorage.getItem("cart");
              var obj = [];
              if (cart) {
                  obj = JSON.parse(cart);
              }
              obj.push({ "id": id, "title": title, "price": rawPrice });
              sessionStorage.setItem("cart", JSON.stringify(obj));
  
              $("#displayTotal").show();
          });
          function populateContainer() {
              var retrieveCartFromSessionStorage = sessionStorage.getItem("cart");
              var displayCartInSessionStorage = JSON.parse(retrieveCartFromSessionStorage);
  
              var total = 0;
              var formatter = new Intl.NumberFormat('en-GB', {
                  style: 'currency',
                  currency: 'GBP',
                  minimumFractionDigits: 2
              });
  
              for (var p in displayCartInSessionStorage) {
                  if (displayCartInSessionStorage.hasOwnProperty(p)) {
                      $(".itemsInCart").append('&lt;p class="remove-item" data-id="' + displayCartInSessionStorage[p].id + '"&gt;' + displayCartInSessionStorage[p].title + ' ' + formatter.format(displayCartInSessionStorage[p].price) + " " + '&lt;span class="text-danger"&gt;Remove Item&lt;/span&gt;&lt;/p&gt;');
                      total += displayCartInSessionStorage[p].price;
                  }
              }
  
              var basicPrice = $("#aircraft-basic-price").attr('data-basic');
              var sum = parseFloat(basicPrice) + parseFloat(total);
  
              $("#displayTotal").text(formatter.format(sum));
          }
  
          populateContainer();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The modal is:</p>
  
  <pre><code>&lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h4&gt;Products&lt;/h4&gt;&lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span
                      aria-hidden="true"&gt;×&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;p class="text-center text-muted"&gt;Items in Cart&lt;/p&gt;
              &lt;div class="itemsInCart"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;&lt;button class="btn btn-light" type="button" data-dismiss="modal"&gt;Close&lt;/button&gt;&lt;button
                  class="btn btn-dark" type="button"&gt;Checkout&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>