Javascript/Jquery : How can I show value which match with selected value on dynamic table?

Question

I have a dynamic table where button on click add new row. Each row has a select value for product name and a input value for product price. I want to show the product price depends on the selected value. For backed I used Laravel 7. Below I added my code:

Table:

<button id="productAdd" type="button"> Add Row</button>
<table id="product-table" class="table table-bordered text-center">
   <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->name }}</option>
            @endforeach
         </select>
      </td>
      <td>
         @foreach($product as $row)
         <input  id="price_{{ $row->id }}" value="{{ $row->price }}" type="number"  class="form-control price"  style="display:none;">
         @endforeach
      </td>
      <td><button class="remove">Delete</button></td>
   </tr>
   </tbody>
</table>

This is the script where button on click add a new row:

$(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(); // reset the numbers
    $tb.append($row);
  });
  $tb.on('click', '.remove', function() {
    $(this).parents('tr').remove();
  });
});

Here I show all the product price and all are hidden. I want to show the price value which match with the selected value. For this I used id = price_{{ $row->id }}

@foreach($product as $row)
  <input  id="price_{{ $row->id }}" value="{{ $row->price }}" type="number" class="form-control price"  style="display:none;">
@endforeach

And this is my script where showed the product price:

$('#product-name').on('change',function(){
 $(".price").hide();
 var price = $(this).find('option:selected').val();
 $("#price_" + price).show();});

But this works for the first row only. How can I merge this script, so that it works for every new row added inside the table?

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

$('#product-name').on('change',function(){
 $(".price").hide();
 var price = $(this).find('option:selected').val();
 $("#price_" + price).show();});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="productAdd" type="button"> Add Row</button>
<table id="product-table" class="table table-bordered text-center">
   <tr>
      <td>
         <select name="product_id[]" class="form-control" id="product-name">
            <option value="" selected disabled>Select Product</option>
            <option value="1">Pant</option>
            <option value="2">Shirt</option>
            <option value="3">T-shirt</option>
         </select>
      </td>
      <td>
        <input  id="price_1" value="100" type="number"  class="form-control price"  style="display:none;">
         <input  id="price_2" value="200" type="number"  class="form-control price"  style="display:none;">
          <input  id="price_3" value="50" type="number"  class="form-control price"  style="display:none;">
      </td>
      <td><button class="remove">Delete</button></td>
   </tr>
</table>

Answer 1

With proper delegation it will work

As I said in my other answer, do not use ID

Here is a working version. See I changed the ID to class

$(function() {
  const $tb = $('#product-table tbody');
  $(".remove").eq(0).hide()
  $("#productAdd").on("click", function() {
    const $row = $tb.find("tr").eq(0).clone();
    $(".remove", $row).show(); // show the hidden delete on this row
    $row.find("select").val(""); // reset the select
    $row.find("[type=number]").val(); // reset the numbers
    $tb.append($row);
  });
  $tb.on('click', '.remove', function() {
    $(this).closest('tr').remove();
  });
  $tb.on('change', '.product-name', function() {
    const $row = $(this).closest('tr');
    $(".price", $row).hide();
    const whichPrice = $(this).val();
    if (whichPrice != "") $(".price", $row).eq(whichPrice-1).show()
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="productAdd" type="button"> Add Row</button>
<table id="product-table" class="table table-bordered text-center">
  <tr>
    <td>
      <select name="product_id[]" class="form-control product-name">
        <option value="" selected disabled>Select Product</option>
        <option value="1">Pant</option>
        <option value="2">Shirt</option>
        <option value="3">T-shirt</option>
      </select>
    </td>
    <td>
      <input value="100" type="number" class="form-control price" style="display:none;">
      <input value="200" type="number" class="form-control price" style="display:none;">
      <input value="50" type="number" class="form-control price" style="display:none;">
    </td>
    <td><button class="remove">Delete</button></td>
  </tr>
</table>