动态生成的选择框，当选项更改时更新所有字段

Question

我正在尝试填充特定药品的价格，但是在更改动态生成的选择框选项时，所有价格字段的值都相同。

这是我的HTML选择框：

<td style="width: 30%">
 <select name="product_id[]" class="form-control product_id" required=""> 
  <option> --- Select ---</option>
   @foreach($products as $product)
    <option value="{{ $product->id }}"> {{ $product->name }}</option>
   @endforeach
 </select>
</td>

这是我的JQuery代码：

$(document).on('change','.product_id',function()
    {
        id = $(this).val();
        var urllink ='show_medicine_price/'+id;
        $.ajax({
            dataType: 'json',
            type:'get',
            headers: { 'X-CSRF-TOKEN':$('meta[name="csrftoken"]').attr('content') },
            url:urllink,
            success: function (result) {
                    $('#add_form .price').val(result.price);
                },
                complete: function(result){
            },
            error: function(result){
                toastr.error("Error fetching the Product information", "Product");
            }
        });
    });