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

I have two tables <table> 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="{{$lastid->id}}"></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">
{{$message}}
</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">
{{$message}}
</div>
@enderror
</td>
<td>
<select style="width: 150px; !important"   class="form-control getUnit"
name="unit_id[]">
@foreach ($units as $unit)
<option value="{{$unit->id}}" name="{{$unit->unit_code}}">{{$unit->unit_name . ' ( ' . $unit->unit_code . ' ) '}}
</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="{{$lastid->id}}"></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="{{$unit->id}}" name="{{$unit->unit_code}}">{{$unit->unit_name . ' ( ' . $unit->unit_code . ' ) '}}</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);
});

It is possible that I don't fully understand what you are trying to do, but I will address the problem as I understand it.

I think that when the user clicks the "Add Cells" button, that you wish to add a new row to the bottom table (which you already have working) and to populate in the previously last row in the bottom table the value of the input in the "C" column. The value of this input should be the same as what was selected in the select menu in the third column of the last row in the top table.

To do this, I would implement the second #add4 click handler as follows:

$('#add4').click(function() {
// get the total count of rows in the top table
const numRows = $('#table_field4 .trr').length;
// get the index of the previously last row
// (we need to subtract 2 from the numRows because we have just added a row)
const prevRowIndex = numRows - 2;
// get the previously last row
const prevRow = $('#table_field4 .trr').eq(prevRowIndex);
// get the unit_id value from the select in that row
const unitId = prevRow.find('select[name="unit_id[]"]').val();
// set the unitId value in the corresponding row/input in the second table
$('#table_field5 tbody tr').eq(prevRowIndex).find('input').first().val(unitId);
// append the new row to the bottom table as you were doing before
// I am using a template string for readability
$('#table_field5').append(`<tr>
<td>
<input type="text" value="">
</td>
<td>
<input type="text" name="value[]">
</td>
<td>
<input type="text" name="value[]">
</td>
</tr>`);
});

I have created a fiddle for reference. But note that it doesn't have the Blade template interpolation.

Additional Requirements

If you want to keep the values in the second table in sync with what is selected in the first table, you will need to attach an event listener on the first table that listens for changes to all select[name="unit_id[]"] elements in the table. When it detects a change, it must determine the index of the row of the element that was changed and use this index to update the corresponding row in the second table.

The code would be:

$('#table_field4').on('change', 'select[name="unit_id[]"]', function () {
const $this = $(this);
const rowIndex = $this.closest('tr').index();
const unitId = $this.val();
$('#table_field5 tbody tr').eq(rowIndex).find('input').first().val(unitId)
});

Here is a fiddle with this addition.