how do I update price when product is selected using jquery?

I am working on an inventory management system that involves sales of products

The form is dynamic

when a user click on add new product it creates another row of product where the user selects the product

I want to update the price of the product as the user selects the product

My HTML Code

<form role="form" action="" method="get">
    @csrf
    <div class="card-body">
        <div class="row">
            <div class="col-md-12">
            </div>
            <div class="col-md-12 right my-3">
                <a href="#" class="btn btn-danger" id="add-product">Add New Product</a>
            </div>
            <div id="wrapper" class="col-md-12">
                <div id="new-field" class="col-md-12 row-field">
                    <div class="row">

                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Product Name</label>
                                <select name="product[]" class="form-control product">
                                    <option value="">Select Product Name</option>
                                    @foreach ($products as $product)
                                        <option value="" name="product[]">
                                            </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Quantity</label>
                                <input type="text" name="quantity[]" class="form-control"
                                    value=""
                                    placeholder="Enter Quantity">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Unit Price</label>
                                <input type="text" name="price[]"
                                    class="form-control price"
                                    placeholder="Enter Quantity">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="card-footer">
        <button type="submit" class="btn btn-primary float-md-right">Add Sales</button>
    </div>
</form>

The jquery gets the product id send it to the server through axios and get the price of the product and update the price input field

but it only works for the first product

JQUERY

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        $("#add-product").click(function(e) {
            e.preventDefault();
            $("#new-field").clone().appendTo("#wrapper");
        });
        $("#wrapper").on('change', '.product', function(e) {
        e.preventDefault();
        axios.get("/ims/api/get-price/" + $(this).val())
            .then(function(response) {

                $(this).parent('.row-field').find('.price').val(response.data.price);

            });
    })
</script>

JSON

{
   price: 75800.42
}

How can I make it work for other product?

via Chebli Mohamed