Jquery: How multiplication of two fields by closest classname?

Question

I have dynamic table where button on click add a new table row. On each row there is price, qty and total price input field. I want that when user put value on qty field, it will multiply price and qty and show on total price input.

My Code:

$(document).ready(function(){
var product = '
<tr>
   <td>
      <select name="product_id" class="form-control" id="product-name">
         <option value="" selected disabled>Select Product</option>
         @foreach($product as $row) 
         <option value="{{$row->id}}">{{$row->product_name}}</option>
         @endforeach 
      </select>
   </td>
   <td><input type="number" name="p_price[]" class="form-control p_price"></td>
   <td><input type="number" name="p_qty[]" class="form-control qty" ></td>
   <td><input type="number" name="p_total" class="form-control t_price" ></td>
   <td><button class="btn btn-danger delete theme-danger btn-xs"><i class="fa fa-times" aria-hidden="true"></i></button></td>
</tr>
'; 
   $("#productAdd").click(function(){
      $('#product-table tbody').append(product);
   });
   $(document).on('click','.delete',function(){
      $(this).parents('tr').remove();
   });

   $(function() {
      $(document)
          .on('input', '.qty');
         $('.t_price').val($('.p_price').val() * $('.qty').val());
   });
   
});

How can I calculate each row value?

Answer 1

You had the right idea

Note: Removed the ID
Delegate from tbody instead of document
Hide the first delete

$(function() {
  const $tb = $('#product-table tbody');
  $(".delete").eq(0).hide()
  $("#productAdd").on("click",function() {
    const $row = $tb.find("tr").eq(0).clone();
    $(".delete",$row).show(); // show the hidden delete on this row
    $row.find("select").val(""); // reset the select
    $row.find("[type=number]").val(0); // reset the numbers
    $tb.append($row);
  });
  $tb.on('click', '.delete', function() {
    $(this).parents('tr').remove();
  });
  $tb.on('input', '.qty', function() {
    const $row = $(this).closest("tr");
    $('.t_price',$row).val($('.p_price',$row).val() * $('.qty',$row).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="productAdd">ADD</button>
<table id="product-table">
  <tbody>
    <tr>
      <td>
        <select name="product_id" class="form-control">
          <option value="" selected disabled>Select Product</option>
          <option value="1">Product 1</option>
          <option value="2">Product 2</option>
          <option value="3">Product 3</option>
        </select>
      </td>
      <td><input type="number" name="p_price[]" class="form-control p_price"></td>
      <td><input type="number" name="p_qty[]" class="form-control qty"></td>
      <td><input type="number" name="p_total" class="form-control t_price"></td>
      <td><button class="btn btn-danger delete theme-danger btn-xs"><i class="fa fa-times" aria-hidden="true"></i></button></td>
    </tr>
  </tbody>
</table>