javascript - Update Incremented Quantity in Order Item Total?

Question

I'm trying to update item totals when an image card is clicked and update the corresponding totals and prices in an order panel. See screenshot.

I'm currently incrementing the quantity total onclick in the black circle qty-icon div on the image card using the "Update food quantity" function below which increments the number, but how do I pass that incremented value to the "0 Items" field in the add-order-panel panel at the bottom and update the price in "Add to Order"?

Link to GitHub repo
Live GitHub page

// Update food quantity
    $(function() {
        $('.food-container').click( function() {
            var num = $(this).find('.qty-icon');
            num.text( parseInt(num.text()) + 1 );
        });
    });

---

<!-- Sliders -->
<div class="food-container">
    <div class="food-icon">
        <div class="qty-icon">0</div>
        <img src="images/food/icons/sliders.png" alt="">
    </div>

    <div class="food-details">
        <div class="food-title left">
            <h4>Sliders</h4>
        </div>

        <div class="food-title right">
            <h4>$5</h4>
        </div>
    </div>
</div>

---

<!-- Add to Order Panel -->
<div class="add-order-panel down">
    <!-- Order Buttons -->
    <div class="order-buttons">
        <a href="#">
            <div class="order-but-container one">
                <h4><span class="bold-cash">0</span> Items</h4>
            </div>
        </a>

        <a href="#">
            <div class="order-but-container two">
                <div class="order-label">
                    <h4>Add to Order</h4>
                </div>

                <div>
                    <h4><span class="bold-cash">$0</span></h4>
                </div>
            </div>
        </a>
    </div>
</div>

Answer 1

You can use .each loop to iterate through your food-container div then inside this you need to get qty ,price and add them to some variable . Finally ,show these values insid your total & item quantity spans.

Demo code :

$(function() {
  $('.food-container .qty-icon').click(function() {
    var num = $(this);
    num.text(parseInt(num.text()) + 1);
    var qty = 0;
    var total = 0;
    //loop through your food conatiner divs
    $(".food-container").each(function() {
      //add total qty on evry iteration
      qty += parseInt($(this).find(".qty-icon").text())
      //get actual qty
      var qty_of_item = parseInt($(this).find(".qty-icon").text())
      //mutliply it with price add total
      total += parseInt($(this).find('.price').text().replace('$', '')) * qty_of_item;
      
    })
    $(".order-but-container.one .bold-cash").text(qty); //set new qty
    $("#total").text("$" + total) //set total

  });
});

.food-container {
  width: 105px;
  height: 150px;
  border: 1px solid blue;
  margin-bottom: 5px
}

.food-icon {
  text-align: right;
  font-size: 20px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Order Buttons -->
<div class="order-buttons">
  <a href="#">
    <div class="order-but-container one">
      <h4><span class="bold-cash">0</span> Items</h4>
    </div>
  </a>

  <a href="#">
    <div class="order-but-container two">
      <div class="order-label">
        <h4>Add to Order</h4>
      </div>

      <div>
        <!--added here id-->
        <h4><span id="total" class="bold-cash">$0</span></h4>
      </div>
    </div>
  </a>
</div>

<div class="food-container">
  <div class="food-icon">
    <div class="qty-icon">0</div>
    <img src="images/food/icons/sliders.png" alt="">
  </div>

  <div class="food-details">
    <div class="food-title left">
      <h4>pizza</h4>
    </div>

    <div class="food-title right">
      <!--added here class-->
      <h4 class="price">$10</h4>
    </div>
  </div>
</div>
<div class="food-container">
  <div class="food-icon">
    <div class="qty-icon">0</div>
    <img src="images/food/icons/sliders.png" alt="">
  </div>

  <div class="food-details">
    <div class="food-title left">
      <h4>burger</h4>
    </div>

    <div class="food-title right">
      <h4 class="price">$5</h4>
    </div>
  </div>
</div>
<div class="food-container">
  <div class="food-icon">
    <div class="qty-icon">0</div>
    <img src="images/food/icons/sliders.png" alt="">
  </div>

  <div class="food-details">
    <div class="food-title left">
      <h4>somethings</h4>
    </div>

    <div class="food-title right">
      <h4 class="price">$5</h4>
    </div>
  </div>
</div>
<div class="add-order-panel down">