jQuery中的Nan以查看多个行值

当我显示单行值（（数量*产品）=总计）时，它可以工作。

但是使用会话在一行中添加更多值会导致在我更改数量值时显示类似NaN的错误。

我的代码：

<table class="table">
<thead>
<tr>
    <th class="pro-remove">Remove</th>
    <th class="pro-thumbnail">Image</th>
    <th class="pro-title">Product</th>
    <th class="pro-price">Price</th>
    <th class="pro-quantity">Quantity</th> 
    <th class="pro-subtotal"> Total</th>
</tr>
</thead>
<tbody> 
<?php 
    $cartid = $_GET['proid'];  
    $sqlpd = mysql_query("select * from orderdetail LEFT JOIN products ON orderdetail.product_id = products.product_id where sessionid='$session_id'")or die(mysql_error()); 
    //echo "select * from orderdetail LEFT JOIN products ON orderdetail.product_id = products.product_id where sessionid='$session_id'";exit();
    while($getpd = mysql_fetch_array($sqlpd)){
            $product_id = $getpd['product_id'];
        ?> 
<tr>
    <td class="pro-remove"><a href="javascript:void(0);"  name="cart_remove" id="cart_remove"><i class="fa fa-trash-o"></i></a></td>
    <td class="pro-thumbnail"> 
        <img src="admin/<?php echo $getpd['medium_image'];?>" height="50" width="50">
    </td> 
    <td class="pro-title"><?php echo $getpd['product_id'];?></td>
    <td class="pro-price"><span class="price"><i class="fa fa-inr"></i><?php echo number_format($getpd['actual_price'],2);?>
</span></td>

    <td class="pro-quantity">
        <input type="number" class="cardqty-1" id="quantity" min="1" value="1" name="quantity" style="width:50px;">
        <a href="javascript:void();" class="updatecart" data-id="1" data-prd_id="380" data-rowid="c2b5d53083a7597dd75ac36d9fd93581"><i class="fa fa-refresh" aria-hidden="true"></i></a>
    </td>
    <td class="pro-subtotal"><span class="total"><i class="fa fa-inr"></i><?php echo number_format($getpd['actual_price'],2);?></span></td>
</tr>
<?php }?>
</tbody>
<tfoot>
<tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th >Sub Total</th>
    <th class="pro-subtotal text-center"><span class="total"><i class="fa fa-inr"></i><?php echo $tot_amt += $getpd['actual_price'];?></span></th>

</tr>
<tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th >GST(12%)</th>
    <th class="pro-subtotal text-center"><i class="fa fa-inr"></i><?php echo  $tot_amt +=$getpd['commission_amount'];?></th>
</tr>
<tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th >Grand Total</th>
    <th class="pro-subtotal text-center"><i class="fa fa-inr"></i><?php echo number_format($getpd['actual_price'],2);?></th>
</tr>
</tfoot>

我的Jquery脚本：

    <script type="text/javascript">
    $(document).ready(function() { 
        $('input[name=\'quantity\']').on('change keyup click', function() {
          var price = $('.price').text();
          var currency = $('.price').text();
          var quantity = $('#quantity').val(); 
          $('.total').text((price * quantity).toFixed(2));  
        });
    });
    </script>

HTML代码：

<table class="table">
    <thead>
        <tr>
            <th class="pro-remove">Remove</th>
            <th class="pro-thumbnail">Image</th>
            <th class="pro-title">Product</th>
            <th class="pro-price">Price</th>
            <th class="pro-quantity">Quantity</th> 
            <th class="pro-subtotal"> Total</th>
        </tr>
    </thead>
    <tbody> 

        <tr>
            <td class="pro-remove"><a href="javascript:void(0);"  name="cart_remove" id="cart_remove" class="delete"><i class="fa fa-trash-o"></i></a></td>
            <td class="pro-thumbnail"> 
                <img src="admin/assets/images/uploads/products/920535865hinite_caps.png" height="50" width="50">
            </td> 
            <td class="pro-title">1</td>
            <td class="pro-price"><span class="price"><i class="fa fa-inr"></i>360.00                                            </span></td>

            <td class="pro-quantity">
                <input type="number" class="cardqty-1 quantity" id="quantity" min="1" value="1" name="quantity" style="width:50px;">
                <a href="javascript:void();" class="updatecart" data-id="1" data-prd_id="380" data-rowid="c2b5d53083a7597dd75ac36d9fd93581"><i class="fa fa-refresh" aria-hidden="true"></i></a>
            </td>
            <td class="pro-subtotal"><span class="total"><i class="fa fa-inr"></i>360.00</span></td>
        </tr>

        <tr>
            <td class="pro-remove"><a href="javascript:void(0);"  name="cart_remove" id="cart_remove" class="delete"><i class="fa fa-trash-o"></i></a></td>
            <td class="pro-thumbnail"> 
                <img src="admin/assets/images/uploads/products/920535865hinite_caps.png" height="50" width="50">
            </td> 
            <td class="pro-title">1</td>
            <td class="pro-price"><span class="price"><i class="fa fa-inr"></i>360.00                                            </span></td>

            <td class="pro-quantity">
                <input type="number" class="cardqty-1 quantity" id="quantity" min="1" value="1" name="quantity" style="width:50px;">
                <a href="javascript:void();" class="updatecart" data-id="1" data-prd_id="380" data-rowid="c2b5d53083a7597dd75ac36d9fd93581"><i class="fa fa-refresh" aria-hidden="true"></i></a>
            </td>
            <td class="pro-subtotal"><span class="total"><i class="fa fa-inr"></i>360.00</span></td>
        </tr>
                                                    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th >Sub Total</th>
            <th class="pro-subtotal text-center"><span class="total"><i class="fa fa-inr"></i>0</span></th>

        </tr>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th >GST(12%)</th>
            <th class="pro-subtotal text-center"><i class="fa fa-inr"></i>0</th>
        </tr>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th >Grand Total</th>
            <th class="pro-subtotal text-center"><i class="fa fa-inr"></i>0.00</th>
        </tr>
    </tfoot>
</table>