how do I update price after in axios response using jquery?

I am writing inventory management system where I what the user to select product and I use axios to get the corresponding price of the product

It is a multiple rows where the user click on add product to select the product and the corresponding price displays

The jquery creates a new row of product and also which allows the user to select a product and it uses axios to request for the price from the server.

When the request returns the price from the server it update the price input field.

But it updates the price with 0 instead of the response from axios

$("#add-product").click(function(e) {
  e.preventDefault();
  $("#new-field").clone().appendTo("#wrapper");
});
$("#payment-method").change(function() {
  $(".full-payment").css({
    "display": "block"
  });
})

$("#wrapper").on('change', '.product', function(e) {
  e.preventDefault();
  $(this).closest('.row-field').find('.price').html("loading...")

  let price = 0;
  axios.get("/api/get-price/" + $(this).val())
    .then(function(response) {
      console.log(response.data.price)
      $(this).closest('.row-field').find('.price').html(price);
      $(this).closest('.row-field').find('.price').val(price);

    });

})

$("#wrapper").on('keyup', '.quantity', function() {
  var total = 0;
  let price = $(this).closest(".row-field").find(".price").val();
  console.log("price", price)
  if (isNaN(price)) {
    alert("Allow the rpice to load")
  } else {

    total = parseInt($(this).closest(".row-field").find(".price").val()) * parseInt($(this).val());
    if (isNaN(total)) {
      $(this).closest(".row-field").find(".sub-total").html(0.00);
      return;
    }
    $(this).closest(".row-field").find(".sub-total").html(total);
    console.log("total", total);

    var total = 0,
      val;
    $(".sub-total").each(function() {
      vals = parseInt($(this).text());
      console.log("value ", vals)
      val = isNaN(vals) || $.trim(vals) === "" ? 0 : parseFloat(vals);
      total += val;
    })
    $(".total").html(total);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6 offset-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="">Dashboard</a></li>
            <li class="breadcrumb-item active">Add New Sales</li>
          </ol>
        </div>
      </div>
    </div>
    <!-- /.container-fluid -->
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <!-- left column -->
        <div class="col-md-12">
          <!-- general form elements -->
          <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">Add New Sales</h3>
            </div>
            <!-- /.card-header -->

            <!-- form start -->
            <form role="form" action="" method="post">
              @csrf
              <div class="card-body">
                <div class="row">

                  <div class="col-md-12">
                    <div class="form-group">
                      <label>Payment Method</label>
                      <select name="payment_method" id="payment-method" class="form-control">
                        <option value="">Select Payment Method</option>
                        <option value="cash">Cash</option>
                        <option value="bank_transfer">Bank Transfer</option>
                      </select>
                      <!-- @if ($errors->first())
    <span style="font-size: 12px; color: red"></span>
    @endif -->
                    </div>
                  </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-3">
                          <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-3">
                          <div class="form-group">
                            <label>Quantity</label>
                            <input type="text" name="quantity[]" class="form-control quantity" value="" placeholder="Enter Quantity">
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Unit Price</label>
                            <div class="price form-control">Price</div>
                            <input type="hidden" name="price[]" class="price" />
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                            <label>Sub Total</label>
                            <div class="form-control sub-total">0.00</div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>

                <!-- /.card-body -->
                <div id="new-field" class="row">
                  <div class="col-md-9">
                    Total
                  </div>
                  <div class="col-md-3 total">
                    N
                    <span>0.00</span>

                  </div>
                </div>
              </div>

              <div class="card-footer">
                <button type="submit" class="btn btn-primary float-md-right">Add Sales</button>
              </div>
            </form>
          </div>
          <!-- /.card -->
        </div>
        <!--/.col (left) -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
  </section>
</div>

via Chebli Mohamed