[Solved] Checkout table not rendering properly on front end

/* Set rates + misc */
var taxRate = 0.0825;
var fadeTime = 300;

/* Assign actions */
$(".product-quantity-l3 input").change(function() {
  updateQuantity(this);
});

/* Recalculate cart */
function recalculateCart() {
  var subtotal = 0;

  /* Sum up row totals */
  $(".product-l3").each(function() {
    subtotal += parseFloat(
      $(this)
      .children(".product-line-price-l3")
      .text()
    );
  });

  /* Calculate totals */
  var tax = subtotal * taxRate;
  var total = subtotal + tax;

  /* Update totals display */
  $(".totals-value-l3").fadeOut(fadeTime, function() {
    $("#cart-subtotal-l3").html(subtotal.toFixed(2));
    $("#cart-tax-l3").html(tax.toFixed(2));
    $("#cart-total-l3").html(total.toFixed(2));
    if (total == 0) {
      $(".checkout-l3").fadeOut(fadeTime);
    } else {
      $(".checkout-l3").fadeIn(fadeTime);
    }
    $(".totals-value-l3").fadeIn(fadeTime);
  });
}

/* Update quantity */
function updateQuantity(quantityInput) {
  /* Calculate line price */
  var productRow = $(quantityInput).parent().parent();
  var price = parseFloat(productRow.children(".product-price-l3").text());
  var quantity = $(quantityInput).val();
  var linePrice = price * quantity;

  /* Update line price display and recalc cart totals */
  productRow.children(".product-line-price-l3").each(function() {
    $(this).fadeOut(fadeTime, function() {
      $(this).text(linePrice.toFixed(2));
      recalculateCart();
      $(this).fadeIn(fadeTime);
    });
  });
}

/* Add here all your css styles (customizations) */

/* Global settings */

/* Global "table" column settings */

.shopping-cart-l3{
  padding-top: 5%;
}

.product-details-l3 {
  float: left;
  width: 37%;
}

.product-price-l3 {
  float: left;
  width: 12%;
}

.product-quantity-l3 {
  float: left;
  width: 10%;
}

.product-line-price-l3 {
  float: left;
  width: 12%;
  text-align: right;
}

/* This is used as the traditional .clearfix class */

.group-l3 .shopping-cart-l3 .column-labels-l3 .product-l3 .totals-item-l3 {
  content: "";
  display: table;
}

.group-l3 .shopping-cart-l3 .column-labels-l3 .product-l3 .totals-item-l3 {
  clear: both;
}

.group-l3 .shopping-cart-l3 .column-labels-l3,
.product-l3 .totals-item-l3 {
  zoom: 1;
}

/* Apply clearfix in a few places */

/* Apply dollar signs */

.product-l3 .product-price-l3 .product-line-price-l3 .totals-value-l3 {
  content: "$";
}

/* Body/Header stuff */

}

h1 {
  font-weight: 100;
}

label {
  color: #aaa;
}

.shopping-cart-l3 {
  margin-top: -45px;
}

/* Column headers */

.column-labels-l3 .label-l3 {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.column-labels-l3 .product-image-l3 .product-details-l3 {
  text-indent: -9999px;
}

/* Product entries */

.product-l3 {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.product-l3 .product-details-l3 .product-title-l3 {
  margin-right: 20px;
  font-family: "Helvetica Neue Medium";
}

.product-l3 .product-quantity-l3 input {
  width: 40px;
}

/* Totals section */

.totals-l3 .totals-item-l3 {
  float: left;
  clear: both;
  width: 80%;
  margin-bottom: 10px;
}

.totals-l3 .totals-item-l3 .label-l3 {
  float: left;
  clear: both;
  width: 80%;
  text-align: right;
}

.totals-l3 .totals-item-l3 .totals-value-l3 {
  float: right;
  width: 20%;
  text-align: right;
}

.totals-l3 .totals-item-total-l3 {
  font-family: "Helvetica Neue Medium";
}

.checkout-l3 {
  float: left;
  border: 0;
  margin-top: 20px;
  padding: 6px 11px;
  background-color: #6b6;
  color: #fff;
  font-size: 20px;
  border-radius: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Products</h1>

<div class="shopping-cart-l3">

  <div class="column-labels-l3">
    <label class="product-details-l3">Product</label>
    <label class="product-price-l3">Price</label>
    <label class="product-quantity-l3">Quantity</label>
    <label class="product-line-price-l3">Total</label>
  </div>

  <div class="product-l3">
    <div class="product-details-l3">
      <div class="product-title-l3">Product 1</div>
    </div>
    <div class="product-price-l3">95.00</div>
    <div class="product-quantity-l3">
      <input type="number" value="0" min="0">
    </div>

    <div class="product-line-price-l3">0.00</div>
  </div>

  <div class="product-l3">
    <div class="product-details-l3">
      <div class="product-title-l3">Product 2</div>
    </div>
    <div class="product-price-l3">60.00</div>
    <div class="product-quantity-l3">
      <input type="number" value="0" min="0">
    </div>
    <div class="product-line-price-l3">0.00</div>
  </div>

  <div class="product-l3">
    <div class="product-details-l3">
      <div class="product-title-l3">Product 3</div>
    </div>
    <div class="product-price-l3">45.00</div>
    <div class="product-quantity-l3">
      <input type="number" value="0" min="0">
    </div>
    <div class="product-line-price-l3">0.00</div>
  </div>

  <div class="totals-l3">
    <div class="totals-item-l3">
      <label>Subtotal</label>
      <div class="totals-value-l3" id="cart-subtotal-l3">0.00</div>
    </div>
    <div class="totals-item-l3">
      <label>Tax (8.25%)</label>
      <div class="totals-value-l3" id="cart-tax-l3">0.00</div>
    </div>
    <div class="totals-item-l3 totals-item-total-l3">
      <label>Grand Total</label>
      <div class="totals-value-l3" id="cart-total-l3">0.00</div>
    </div>
  </div>

  <button class="checkout-l3">Checkout</button>

</div>