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

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></th>
        @endforeach
        <th>Add More</th>
    </tr>
</thead>
<form action=" 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=""></option>
                    @endforeach
                </select>
            </td>
            @foreach($size_infos as $size)
            <td>
                <div id="inputDiv">
                    <input type="hidden" name="size_id[]" value="" 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: "",
                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=""></option>@endforeach</select></td>@foreach($size_infos as $sizeee)<td><div id="inputDiv"><input type="hidden" name="size_id[]" value=""><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>

via Chebli Mohamed