After form submitting I don't get multiple values in array - php

Question

When I click Add More Button then appending the same row and when I submit the form then I getting the first value of the product_name and color_id input field.Where is the problem I didn't find that.
Here is the html code:
<table class="table table-striped table-bordered text-center table-responsive">
<thead class="text-dark">
<tr>
<th>Product Name</th>
<th>Color</th>
#foreach($size_infos as $sizee)
<th>{{$sizee->size_name}}</th>
#endforeach
<th>Add More</th>
</tr>
</thead>
<form action={{url('product-purchase-process')}}" method="POST" enctype="multipart/form-data">
#csrf
<tbody class="add_item">
<tr>
<td width="20%">
<input class="form-control input typeahead" type="text" name="product_name[]" id="product_name" placeholder="Product Name" multiple='multiple'>
</td>
<td width="14%">
<select class="form-control input" name="color_id[]">
<option value="">--Select Color--</option>
#foreach($color_infos as $color)
<option value="{{$color->color_id}}">{{$color->color_name}}</option>
#endforeach
</select>
</td>
#foreach($size_infos as $size)
<td>
<div id="inputDiv">
<input type="hidden" name="size_id[]" value="{{$size->size_id}}" multiple='multiple'>
<input style="width:70px" class="from-control" type="text" name="product_quantity[]" multiple='multiple'>
</div>
</td>
#endforeach
<td width="10%">
<button type="button" id="add_more" class="btn btn-success"><i class="fa fa-plus" aria-hidden="true"></i></button>
</td>
</tr>
<tr>
</tr>
</tbody>
Here is the jquery code:
<script type = "text/javascript" >
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(document).on('focus', "#product_name", function () {
$(this).autocomplete({
source: function (request, response) {
$.ajax({
url: "{{url('autocomplete')}}",
data: {
products: request.products
},
dataType: "json",
success: function (data) {
var resp = $.map(data, function (obj) {
// console.log(obj.product_name);
return obj.product_name;
});
response(resp);
}
});
},
minLength: 1
});
//color field and image field extend here
var htmlString = `<tr class="ree"><td width="20%"><input class="form-control input typeahead" type="text" name="product_name[]" id="product_name" placeholder="Product Name"></td><td width="14%"><select class="form-control input" name="color_id"><option value="">--Select Color--</option>#foreach($color_infos as $colorr)<option value="{{$colorr->color_id}}">{{$colorr->color_name}}</option>#endforeach</select></td>#foreach($size_infos as $sizeee)<td><div id="inputDiv"><input type="hidden" name="size_id[]" value="{{$sizeee->size_id}}"><input style="width:70px" class="from-control" type="text" name="product_quantity[]"></div></td>#endforeach<td width="10%"><button type="button" class="btn btn-danger btnRemove"><i class="fa fa-trash" aria-hidden="true"></i></button></td></tr>`;
$('#add_more').click(function () {
$('.add_item').append(htmlString); // end append
$('.ree .btnRemove').last().click(function () {
$(this).parent().last().remove();
}); // end click
}); // end click
}); </script>