How can I send a value from one table to another table at the same level inside the blade

I have two tables I want to pass the values that are selected from the first table in the third field as shown in the figure

note: that there is a button that adds a new input row by jquery on click (Add Cells)

//here first table code in blade

<table class="table table-bordered table_field4" id="table_field4" style ="overflow-x: auto;white-space: nowrap;">
                                                                        <thead>
                                                                        <tr class="thead-dark">
                                                                            <th> #</th>
                                                                            <th style="width: 250px; !important">first</th>
                                                                            <th style="width: 250px; !important">second </th>

                                                                            <th style="width: 200px; !important">third</th>


                                                                            <th style="width: 200px; !important"></th>
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                        <tr class="trr">
                                                                            <?php $x=1;?>

                                                                            <td>1</td>
                                                                            <td style="display:none;"><input type="text"  name="prod_idd[]" style="display:none;" value=""></td>

                                                                            <td>
                                                                                <input type="text" style="width: 250px; !important" class="sub_code form-control getAllCode putCode" name="sub_code[]">
                                                                                @error('sub_code.*')
                                                                                <div class="alert alert-danger" role="alert">
                                                                                
                                                                                </div>
                                                                                @enderror
                                                                            </td>
                                                                            <!-- heeree -->
                                                                            <td>
                                                                                <input type="text" style="width: 250px; !important" class=" form-control  " name="count_pices[]">
                                                                                @error('.*')
                                                                                <div class="alert alert-danger" role="alert">
                                                                                
                                                                                </div>
                                                                                @enderror
                                                                            </td>
                                                                            <td>
                                                                                <select style="width: 150px; !important"   class="form-control getUnit"
                                                                                        name="unit_id[]">
                                                                                        @foreach ($units as $unit)
                                                                                            <option value="" name="">
                                                                                            </option>
                                                                                        @endforeach
                                                                                    </select>
                                                                            </td>


                                                                            <td style="width: 200px; !important"><input type="button" class="btn btn-success" name="add4" id="add4" value="Add Cells" ></td>
                                                                        </tr>
                                                                        </tbody>
                                                                        <tfoot>
                                                                        <tr>

                                                                        </tr>
                                                                        </tfoot>
                                                                    </table>

// jquery to add new row for first table that have column (third)

$('#add4').click(function(){
          var  size = $('#table_field4 tbody').children().length +1;
          var html = '<tr class="trr">'+'<td>'+size+'</td>'+'<td style="display:none;"><input type="text"  name="prod_idd[]" style="display:none;" value=""></td><td><input type="text" class="form-control sub_code putCode" name="sub_code[]"></td><td><input type="text" class="count_pices form-control" name="count_pices[]"></td><td><select style="width: 150px; !important"   class="form-control getUnit" name="unit_id[]">@foreach ($units as $unit)<option value="" name=""></option>@endforeach</select></td><td><input type="button" class="btn btn-danger" name="remove" id="remove" value="delete" style="color:black;background-color:red;"></td></tr>';
            $('#table_field4').append(html);
            // var rowCount = $('#table_field4 .trr').length;

            // console.log(rowCount);
        });

        $('#table_field4').on('click','#remove',function(){
            $(this).closest('tr').remove();
        });

The first part related to the first table has been completed The following is the second table that is created by calculating the number of rows in the first table and creating equal rows using JQuery.

//here second table

//second table in blade

                                                                    <table class="table table-bordered table_field5" id="table_field5" style ="overflow-x: auto;white-space: nowrap;">
                                                                        <thead>
                                                                        <tr class="thead-dark">
                                                                            
                                                                            <th style="width: 100px; !important">C</th>
                                                                            <th style="width: 100px; !important">الكويت</th>
                                                                            <th style="width: 100px; !important">A</th>
                                                                    
                                                                        </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                            <tr>
                                                                                                                                                   
                                                                            <td ><input type="text" name="" ></td>
                                                                            <td ><input type="text" name="" ></td>
                                                                            <td ><input type="text" name="" ></td>                                                                           
                                                                    </tr>
                                                                        </tbody>
                                                                        <tfoot>
                                                                        <tr>

                                                                        </tr>
                                                                        </tfoot>
                                                                    </table>

Here is the jquery code that counts the number of rows in the first table and adds rows equal to it according to the number of columns in the second table

$('#add4').click(function(){
    var rowCount = $('#table_field4 .trr').length + 1;
    var rowCountone = $('#table_field4 .trr').length ;
          var  size = $('#table_field4 .trr').length + 1;
          var html = '<tr>'+'<td><input type="text" value="" ></td><td ><input type="text" name="value[]" ></td><td ><input type="text" name="value[]" ></td></tr>';

          $('#table_field5').append(html);

        });

via Chebli Mohamed