send an image through ajax in on change event with different id - php

Question

iam trying to update image through on change event in codeigniter
and want to update with different id each time when i select the image different. please help with the solution thanks in advance
Each time the product_image_id should change according to db table
$(document).ready(function(){
$('.images').on('change',function(){
var link = '<?php echo site_url('menu_management_con/editimage');?>';
var product_image_id = $('.id').val();
var formData= new FormData();
var file = this.files[0];
formData.append('file', file);
formData.append('product_image_id',product_image_id);
$.ajax({
type:'POST',
url: link,
data : formData,
cache: false,
processData:false,
contentType:false,
success:function(data){
alert(data);
}
});
});
});
this is my html code
am trying to update image through on change event in codeigniter
<form id="add_produc" method="post" class="addProduct" name="add_produc" action="<?=base_url()."menu/product_edit/".$data['product_id'].'/'.$data['category_id'] ?>" enctype="multipart/form-data" >
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered">
<tr>
<th class="head" colspan="2">Edit</th>
</tr>
<tr>
<td><label for="Name">Name:</label></td>
<td>
<input type="text" name="product_name" value="<?= $data['product_name']?>" id="product_name" class="form-control" placeholder="Name">
</td>
</tr>
<tr>
<td> <label for="Description">Description:</label> </td>
<td>
<input type="text" name="product_description" value="<?= $data['product_description']?>" id="product_description" class="form-control" placeholder="description">
</td>
</tr>
<tr >
<td><label for="Photo">Photo:</label> </td>
<td>
<div id="addField0">
<input type="file" name="product_photo[]" multiple id="product_photo" class="form-control" accept="image/*"><br>
</div>
<button id="add-more-edit" name="add-more-edit" class="btn btn-primary">Add More</button>
</td>
</tr>
<?php
if(!empty($image)){
foreach ($image as $result){
?>
<tr class='imagelocation<?= $result->product_image_id ?>'>
<td colspan="2" align='center'>
<input type="text" name="product_image_id" value="<?= $result->product_image_id?>" id="product_photo" class="form-control id" >
<input type="file" name="image" id="image" class="form-control images" accept="image/*">
<img class='img-rounded' height="50" width="50" src="<?= base_url('/assets/uploads/products/'.$result->product_photo)?>" style="vertical-align: middle;">
<span style="cursor:pointer;" onclick="javascript:deleteimage(<?php echo $result->product_image_id ?>)">X</span>
</td>
</tr>
<?php
}
}else{
echo '<div class="empty">No Products Found...!</div>';
}
?>
<tr>
<td colspan="2">
<input type="hidden" name="sub_category_id" value="<?= $data['sub_category_id']?>" id="sub_category_name" class="form-control">
<input type="submit" name="update_product" id="update_product" class="btn btn-info btn-small" value="Update">
</td>
</tr>
</table>
</div>
</div>
</form>