How to loop so I can separate 2 values? [closed]



I’m trying to make an inventory system as part for my e-commerce project so I need to get the price per product. The problem is when I use alert to display the data it combined. My main goal is to get the price per product (row) so I can compute it for the inventory

shopping cart:
shopping cart

The problem. the 2 product price combined. how can i separate them?:
The problem. the 2 product price combined. how can i separate them?

function addtocart()
                      {
                       var sendtotal = $(".total").html();
                       var address   = $('#email-field').val();
                       var pts       = $('#pts').val();
                       var totals    = $('.total').text();
                       var rewards   =(parseFloat(totals)*parseFloat(pts)).toFixed(2);
                       $('.qty').prop('disabled',true);
                       var schedule = $('#deliveryschedule').val();
                       var brgy     = $('#brgy').val();
                       var price    = $('.prodtotal').text();

                      alert(price)

                      var form_data={
                        rewards: rewards,
                        sendtotal: sendtotal,
                        address: address,
                      /*  schedule: $('#schedule').val(), 
                         brgy:    $('#brgy').val(),*/
                      };

                         $.ajax({
                                  async : 'true',
                                   url:"<?php echo base_url() ?>admin/itexmo/",
                                   data: form_data,
                                   method:"post",
                                   cache: false,
                                   success: function (savingStatus) 
                              {
                                   Swal.fire(
                                  'Sucess!',
                                  'Wait for a rider!',
                                  'success'
                                )
                                 
                              },
                                  error: function (xhr, ajaxOptions, thrownError) {
                                alert("Error Encountered While Saving The Events.");
                            }
                                });

                      var timer2 = "1:00";
                      var interval = setInterval(function() {


                        var timer = timer2.split(':');
                        //by parsing integer, I avoid all extra string processing
                        var minutes = parseInt(timer[0], 10);
                        var seconds = parseInt(timer[1], 10);
                        --seconds;
                        minutes = (seconds < 0) ? --minutes : minutes;
                        seconds = (seconds < 0) ? 59 : seconds;
                        seconds = (seconds < 10) ? '0' + seconds : seconds;
                        //minutes = (minutes < 10) ?  minutes : minutes;
                        $('.countdown').html(minutes + ':' + seconds);
                        if (minutes < 0) clearInterval(interval);
                        //check if both minutes and seconds are 0
                        if ((seconds <= 0) && (minutes <= 0)) clearInterval(interval);
                        timer2 = minutes + ':' + seconds;

                      if ((seconds == 0) && (minutes == 0))
                      {
                        $('#test').prop('disabled',true);
                         localStorage.setItem('disabled', '#test');

                      }

                      }, 1000);

                      $('#btncheckout').hide();
                      $('#btnfinish').attr("hidden",false);


                      }


<table class="table table-hover"  id="shoppingcart" style="position: relative;
 top: 125px;">
 <thead>

 <tr>
 <th>Product</th>
 <th>Restaurant</th>
 <th>Quantity</th>
 <th class="text-center">Price</th>
 <th class="text-center">Total</th>
  <th> </th>
  </tr>
  </thead>

 <?php foreach ($cart as $value): ?>
 <tbody>
 <tr>
  <td class="col-sm-8 col-md-6">
 <div class="media">
 <a class="thumbnail pull-left" href="#"> <img class="media-object" 
  src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" 
 style="width: 
 72px; height: 72px;"> </a>
 <div class="media-body">
 <h4 class="media-heading"><a href="#"><?php echo $value['product_name'] ?></a></h4>
 <h5 class="media-heading"> by <a href="#"><?php echo $value['restaurant_name'] ?></a></h5>
 <span>Status: </span><span class="text-warning"><strong><?php echo $value['status'] ?></strong> 
 </span>
 </div>
 </div></td>
 <td class="col-md-1 text-left"><strong class="label label-danger">None</strong></td>
 <td class="col-sm-1 col-md-1 quan" style="text-align: center">
  <input type="email" class="form-control qty" id="qty" name="qty"  value="">
 </td>
 <div class="calculate">
  <td class="col-sm-1 col-md-1 text-center"><strong class="prodprice" id="prodprice"><?php echo 
  $value['price'] ?></strong></td>
  </div>
   <td class="col-sm-1 col-md-1 text-center" ><strong id="prodtotal" class="prodtotal"></strong></td>
      <td class="col-sm-1 col-md-1">
           <button type="button" id="remove" name="remove" onclick="removecart(<?php echo 
  $value['cart_id'] ?>)" 
   class="btn btn-danger">
 <span class="fa fa-remove"></span> Remove
    </button></td>
  </tr>
  <?php endforeach ?>   
  <tr>
      <td>   </td>
   <td>   </td>
   <td>   </td>
  <td><h5>Subtotal</h5></td>
    <td class="text-right"><h5><strong class="subtotal"></strong></h5></td>
 </tr>
 <tr>
  <td>   </td>
  <td>   </td>
   <td>   </td>
  <td><h5>Delivery Fee</h5></td>
  <?php foreach ($fees as $value): ?>
<td class="text-right"><h5><strong id="fees" class="fees">
    <?php echo $value['fee_int'] ?>%</strong></h5></td>
  <?php endforeach ?>

</tr>
<tr>
<td>   </td>
<td>   </td>
<td>   </td>
<td><h3>Total</h3></td>
<td class="text-right" id="total"><h3><strong id="total" class="total"></strong></h3></td>
</tr>
 <tr>
<td>   </td>
 <td>   </td>
 <td>   </td>
  <td>
 <button type="button" id="test" class="btn btn-warning">
 <span class="fa fa-shopping-cart"><h5 class="countdown"></h5></span> Cancel Order
</button></td>
  <td>

  <a href="#"><button type="button" data-toggle="modal" id="btncheckout" data- 
  target="#exampleModalCenter" 
  class="btn btn-success" >
   Checkout <span class="fa fa-play"></span></a></button>

    <a href="#"><button type="button" onclick="finishorder()" id="btnfinish" hidden class="btn 
    btn-success " 
    >
   Finish Order <span class="fa fa-play"></span></a>
   </button></td>
   </tr>
   </tbody>
   </table>
   </div>

Answer

First, properly comment your code and indent your code so it is easy for anyone to read and understand.

Now to the answer:

Since you have multiple elements rendered in he DOM inside your php foreach, when you select the elements using $('.prodtotal') you get an array.

What you can do is,

$('.prodtotal').each (function () {
    console.log($(this).text())
})


Source: stackoverflow