Make a Bill using ajax jquery php and mysql

I am making a bill, when I add more than one product, then the price of all the products is being same. Because of this, I cannot even get the total of all these But i am not able do it , but i am struggling with this. please check my code and tell me its answer.

bill.php

<?php
include 'head.php';
?>

<div>
    <table class="table table-sm table-bordered table-striped">
        <thead>
            <tr>
                <th>Product Name</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total Amount</th>
                <th><input class="addrow" type="button" name="" value="Add"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><select class="form-control">
                    <option value="">--select--</option>
                </select></td>
                <td style="width: 100px"><input class="form-control quantity" type="number" name=""></td>
                <td style="width: 100px"><input class="form-control price" value="" disabled type="text" name=""></td>
                <td style="width: 200px"><input class="form-control amount" value="" disabled type="text" name=""></td>

                <td><input class="deleterow" type="button" name="" value="Delete"></td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function(){
        $.ajax({
            url:"webservice.php",
            type:"post",
            dataType:'json',
            success:function(data){
                $('.table tbody select').append(data);
            },
            error:function(){
                console.log("ERROR IN AJAX");
            }
        });
    });

    $(document).on('change','select',function(){
        let product_value = $(this).val();
        $.ajax({
            url:"productprice.php",
            type:"post",
            data:{product_value},
            dataType:'json',
            success:function(data){
                $('.price').val(data);
            },
            error:function(){
                console.log("ERROR IN AJAX");
            }
        });
    });

    $(document).on('click','.addrow',function(){
        $('.table tbody tr:first-child').clone().appendTo('.table tbody');
    });
    $(document).on('click','.deleterow',function(){
        if($('.table tbody').children().length == 1){
            alert("minimum 1 Product required");
        }else{
            $(this).closest('tr').remove();  
        }     
    });

    $(document).on('change','.quantity',function(){
        let quantity = $('.quantity').val();
        let price = $('.price').val();

        $('.amount').val(quantity * price);
    });
</script>

webservices.php

<?php

include 'connection.php';

$sql = "SELECT * FROM `products`";

$result = mysqli_query($db,$sql);

// $output ="";

while ($row = $result->fetch_assoc()) {
    $output[] = "<option value=$row[product_id]>$row[product_name]</option>";
}

echo json_encode($output);

productprice.php

<?php

include 'connection.php';

$sql = "SELECT * FROM `products`";

$result = mysqli_query($db,$sql);

// $output ="";

while ($row = $result->fetch_assoc()) {
    $output[] = "<option value=$row[product_id]>$row[product_name]</option>";
}

echo json_encode($output);

Solution:

In your current code you are targetting all element with class price whenever your select gets changes . Instead , you can use $(this).closest('tr').find('.price') here closest() method will get closest tr where change has been occur then using .find() method get required price input only . Same do for quantity change event .

Demo Code :

//just for demo...
var data = "<option value=1>A</option><option value=2>B</option><option value=3>C</option>"
$('.table tbody select').append(data);

$(document).on('change', 'select', function() {
  let product_value = $(this).val();
  //declare this outside ajax call..
  var selector = $(this).closest('tr').find('.price')
  /*$.ajax({
    url: "productprice.php",
    type: "post",
    data: {
      product_value
    },
    dataType: 'json',
    success: function(data) {*/
  selector.val(34); //just for demo.. use .val(data)
  /*},
    error: function() {
      console.log("ERROR IN AJAX");
    }
  });*/
});

$(document).on('click', '.addrow', function() {
  var cloned = $('.table tbody tr:first-child').clone();
  $(cloned).find("select").val(""); //empty select
  $(cloned).find("input:not(:last)").val(""); //empty input values
  $(cloned).appendTo('.table tbody');
});
$(document).on('click', '.deleterow', function() {
  if ($('.table tbody').children().length == 1) {
    alert("minimum 1 Product required");
  } else {
    $(this).closest('tr').remove();
  }
});

$(document).on('change', '.quantity', function() {
  let quantity = $(this).val(); //get qty value where change occur
  let price = $(this).closest('tr').find('.price').val(); //get price only from required row..

  //add result only on same row..
  $(this).closest('tr').find('.amount').val(quantity * price);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-sm table-bordered table-striped">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total Amount</th>
      <th><input class="addrow" type="button" name="" value="Add"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select class="form-control">
          <option value="">--select--</option>
        </select>
      </td>
      <td style="width: 100px"><input class="form-control quantity" type="number" name=""></td>
      <td style="width: 100px"><input class="form-control price" value="" disabled type="text" name=""></td>
      <td style="width: 200px"><input class="form-control amount" value="" disabled type="text" name=""></td>

      <td><input class="deleterow" type="button" name="" value="Delete"></td>
    </tr>
  </tbody>
</table>