Dropdown data-attributes to populate into input fields on dynamically added rows

Question

**This is the code i currently come up with I wanted to populate price and tax files from data- attributes **

<table class="table g-5 gs-0 mb-0 fw-bolder text-gray-700" id="tab_logic">
    <!--begin::Table head-->
    <thead>
    <tr class="border-bottom fs-7 fw-bolder text-gray-700 text-uppercase">
        <th class="min-w-50px w-50px">#</th>
        <th class="min-w-300px w-475px">Item</th>
        <th class="min-w-100px w-100px">QTY</th>
        <th class="min-w-100px w-100px">Price</th>
        <th class="min-w-100px w-100px">Tax</th>
        <th class="min-w-100px w-100px text-end">Total</th>
        <th class="min-w-75px w-75px text-end">Action</th>
    </tr>
    </thead>
    <!--end::Table head-->
    <!--begin::Table body-->
    <tbody>
    <tr class="border-bottom border-bottom-dashed" id='addr1'>
        <td class="pt-8 text-nowrap rowid" >1</td>
        <td class="pe-7">
            <select class="form-control form-control-solid itemname" name="itemname[]">
                @foreach($items as $item)
                <option data-rate="{{$item->item_price }}" data-tax="{{$item->item_tax }}">{{$item->item_name}}</option>
                @endforeach
            </select>
        </td>

        <td class="ps-0"><input type="number" class="form-control form-control-solid qty" min="1" name="quantity[]" placeholder="0" /></td>

        <td><input type="number"  class="form-control form-control-solid price"  name="price[]" min="1" placeholder="0.00"  /></td>

        <td><input type="number" class="form-control form-control-solid text-end tax" name="tax[]" min="0" placeholder="0.00"  /></td>

        <td><input type="text" class="form-control form-control-solid text-end total" name="total[]" min="1" placeholder="0.00"   /></td>

        <td class="pt-5 text-end">
            <button class="btn btn-sm btn-icon btn-active-color-primary" id="removeRow">Remove</button>
        </td>
    </tr>
    </tbody>

</table>

Add dynamic rows to the table

<script>
        $(document).ready(function(){

            var i=1;
            $("#add_row").click(function(){b=i-1;
                $('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
                $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
                i++;
            });


            $(document).on('click', '#removeRow', function () {
                if(i>1){
                    $(this).parent().parent().remove();
                    i--;
                }
                calc();
            });
</script>

Populate price and tax fields from data attributes

<script>
        $(document).ready(function() {
            $('tr .itemname').change(function(){
                var selected = $('option:selected', this);
                    // this should now output the correct product name and its rate.
                console.log(selected.data('tax'),  selected.data('rate') );

                    // now to add it to rate field within this TR
                $(this).parent().parent().find('.price').val( selected.data('rate') );
                $(this).parent().parent().find('.tax').val( selected.data('tax') );
            });
        });
    </script>

When select the item first row data populate correctly. However when dynamically add a new row to table and select item its not getting the price and tax values.

Answer 1

I´m not quite sure if this will actually fix it but there is 1 obvious error in your code.

this line

$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');

appends the tr´s to the table but it should append the tr´s to tbody, so change it to

$('#tab_logic tbody').append('<tr id="addr'+(i+1)+'"></tr>');

i guess your .parent().parent()... works for the first item correctly because it´s in tbody and for the new added not