Fetch each records from MySQL with jQuery AJAX in Dynamically Add or Remove Input Fields

I'm trying to Fetch each records from MySQL with jQuery AJAX in Dynamically Add or Remove Input Fields in Laravel, but when I add the second dynamic element, it doesn't add Fetch each records from database.

Can someone guide me how to Fetch each records from database when adding each item.

This is my function in jquery:

$("#addsalequote").click(function(){
    $(".product-text").hide();
    var data = [
        {   code: '<td id="addSaleQuoteProductReference" class="text-center addSaleQuoteProductReference"></td>', 
            product: '<select id="addSaleQuoteProduct" class="js-basic-single form-select" name="addsalequote['+i+'][product_id]" id="product"><option selected>Articulos/Productos</option>@foreach($products as $key => $value)<option value="{{$key}}">{{$value}}</option>@endforeach</select>', 
            quantity: '<input type="number" name="addsalequote['+i+'][quantity]" min="1" class="form-control" />', 
            price: '{!! Form::number('addsalequote[0][price]', null, array('id' => 'saleQuoteProductPrice', 'class' => 'form-control addSaleQuoteProductPrice')) !!}',
            total: '<td class="text-end row-saleQuoteTotal"></td>',
            button: '<button type="button" class="btn btn-danger btn-icon btn-xs remove-tr" data-bs-toggle="tooltip" data-bs-placement="top" title="Quitar producto"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg></button>'
        }
    ];

    var $saleQuoteTable = $('#saleQuoteProductTable');

    var rowElements = data.map(function ( row ) {

        var $row = $('<tr></tr>');

        var $code = $('<td style="width: 5%; vertical-align:middle"></td>').html(row.code);
        var $product = $('<td style="width: 20%"></td>').html(row.product);
        var $quantity = $('<td style="width: 5%"></td>').html(row.quantity);
        var $price = $('<td style="width: 5%"></td>').html(row.price);
        var $total = $('<td style="width: 10%; vertical-align:middle"></td>').html(row.total);
        var $button = $('<td style="width: 5%; vertical-align:middle"></td>').html(row.button);

        $row.append($code, $product, $quantity, $price, $total, $button);
        
        return $row;
    });

    $saleQuoteTable.append(rowElements); 
    
    $('#addSaleQuoteProduct').change(function(){ 
       
        var id=$(this).val();

        $.ajax({
            url:"/get/product/"+id,
            method:'get',
            dataType: 'json',
            data:{id:id,'_token':"{{csrf_token()}}"},
            success:function(response)
            {
                createRows(response);
            }
        });

        function createRows(response){
            $('.addSaleQuoteProductPrice').val(response.sale_price); 
            $('.addSaleQuoteProductReference').text(response.reference); 
        }

    });

    $(document).on('click', '.remove-tr', function(){          
        $(this).parents('tr').remove();        
    });
});

Any recommendations for me to complete this function?