Nan in jquery to view multiple row values

When I display single row value ((quantity * product) = total) it works.

But adding more values in a row using session causes it display an error like NaN when i change quantity values.

My code:

<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>

My Jquery script:

    <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 Code:

<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>

Answer

You can use class and same way calculate final total

$(document).ready(function() { 

  $(document).on('change keyup click', '.quantity', function(e){
  
    var _t = $(this);
    var  price = parseFloat(_t.parents('tr').find('.price').text());
    var  currency = _t.parents('tr').find('.price').text();
    var  quantity = parseInt(_t.parents('tr').find('.quantity').val());
    
     _t.parents('tr').find('.ttotal').text((price * quantity).toFixed(2));
     
     var subtotal = 0;
    $('.ttotal').each(function(){
        var _te = $(this);
         var oneval = _te.html().replace('<i class="fa fa-inr"></i>','');
        subtotal += parseFloat(oneval);
    });
     $('.last_subtotal').text(subtotal);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 ttotal"><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 ttotal"><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 last_subtotal"><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>

Old answer You should use Number for operation, so use parseInt and parseFloat

$(document).ready(function() { 
        $('input[name='quantity']').on('change keyup click', function() {
          var price = parseFloat($('.price').text());
          var currency = $('.price').text();
          var quantity = parseInt($('#quantity').val()); 
          $('.total').text((price * quantity).toFixed(2));  
        });
    });