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

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" >
   <tr>
      <td>
         <select name="product_id[]"  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"    style="display:none;">
         @endforeach
      </td>
      <td><button >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"   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" >
   <tr>
      <td>
         <select name="product_id[]"  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"    style="display:none;">
         <input  id="price_2" value="200" type="number"    style="display:none;">
          <input  id="price_3" value="50" type="number"    style="display:none;">
      </td>
      <td><button >Delete</button></td>
   </tr>
</table>

CodePudding user response：

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).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" >
  <tr>
    <td>
      <select name="product_id[]" >
        <option value="" selected disabled>Select Product</option>
        <option value="0">Pant</option>
        <option value="1">Shirt</option>
        <option value="2">T-shirt</option>
      </select>
    </td>
    <td>
      <input value="100" type="number"  style="display:none;">
      <input value="200" type="number"  style="display:none;">
      <input value="50" type="number"  style="display:none;">
    </td>
    <td><button >Delete</button></td>
  </tr>
</table>

CodePudding user response：

Try this:

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

See also: https://api.jquery.com/delegate/

Ok, is this what you want to do?

$(function() {
  const $tb = $('#product-table');
  $(".remove").eq(0).hide()
  $("#productAdd").on("click", function() {
    const $row = $tb.find("tr").eq(0).clone().attr('data-order', $('#product-table tr').length);
    $(".remove", $row).show();
    $row.find("select").val("");
    $row.find("[type=number]").val();
    $tb.append($row);
  });
  $tb.on('click', '.remove', function() {
    $(this).parents('tr').remove();
  });
});

$(document).delegate(".product-name", "change", function() {
  $(".price").hide();
  var price = $(this).find('option:selected').val();
  $('#product-table tr[data-order="'   $(this).parent().parent().data('order')   '"] td input[type="number"][data-type="'   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" >
  <tr data-order="0">
    <td>
      <select name="product_id[]" >
        <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 data-type="1" value="100" type="number"  style="display:none;">
      <input data-type="2" value="200" type="number"  style="display:none;">
      <input data-type="3" value="50" type="number"  style="display:none;">
    </td>
    <td><button >Delete</button></td>
  </tr>
</table>