How to set table cells values independently with using x-for alpine.js? - alpine.js

Question

I am trying to make a table includes table in every row, and nested x-for is used with alpine.js.With clicking the button located in the lower right corner of the table, new row is added and all cells in the rows have the same value. I couldn't set the rows' values independently. Could you please help?
Thanks in advance for your help,
Cem
function handler() {
return {
fields1: [],
fields: [],
rows: [],
addRate() {
this.fields1.push({
value1: '',
value2: '',
value3: '',
rType: '',
typeA: '',
value4: '',
typeBDateFrom: '',
typeBDateTo: ''
});
},
listField() {
this.fields.splice(0);
this.fields1.splice(0);
this.rows.push({
id: this.id++
});
this.fields1.push({
value1: '',
value2: '',
value3: '',
rType: '',
typeA: '',
value4: '',
typeBDateFrom: '',
typeBDateTo: ''
});
this.fields.push({
value5: '3',
value6: '20',
value7: 'DC',
value8: '40',
value9: '523',
value10: '654',
value11: 'TEST',
value12: 'true',
value13: 'Class1',
value14: '5656',
value15: 'TRM78799',
id:'1'
});
},
}
};
function setDecimal(event) {
this.value = parseFloat(this.value).toFixed(3);
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container col-md-10 offset-md-1">
<div class="row" x-data="handler()" x-init="listField()">
<div class="col">
<table class="table align-items-center table-sm" style="text-align: center;">
<tr>
<template x-for="(row, index) in rows" :key="index">
<p>
<table class="table align-items-center table-sm table-bordered" style="text-align: center;">
<tbody>
<template x-for="(field1, index) in fields1" :key="index">
<tr class="table-success">
<td style="width:100px;"><b>Type</b></td>
<td style="width:100px;">
<select x-model="field1.rType" class="custom-select" name="rType"
id="rType" required>
<option selected>---</option>
<option value="Type A">Type A</option>
<option value="Type B">Type B</option>
</select>
</td>
<td x-show="field1.rType==='Type A'" style="width:120px;">
<b>Type A Name</b>
</td>
<td x-show="field1.rType==='Type A'">
<input x-model="field1.typeA" type="text" class="form-control"
name="typeA" id="typeA">
</td>
<td x-show="field1.rType==='Type A'" style="width:150px;">
<b>Value4</b>
</td>
<td x-show="field1.rType==='Type A'">
<input x-model="field1.value4" type="text" class="form-control"
name="value4" id="value4">
</td>
<td x-show="field1.rType==='Type B'" style="width:120px;">
<b>From</b>
</td>
<td x-show="field1.rType==='Type B'">
<input x-model="field1.typeBDateFrom" type="Type B" class="form-control"
name="typeBDateFrom" id="typeBDateFrom">
</td>
<td x-show="field1.rType==='Type B'" style="width:150px;">
<b>To</b>
</td>
<td x-show="field1.rType==='Type B'">
<input x-model="field1.typeBDateTo" type="Type B" class="form-control"
name="typeBDateTo" id="typeBDateTo">
</td>
</tr>
</template>
</tbody>
</table>
</p>
<p>
<table class="table align-items-center table-sm table-bordered" style="text-align: center;">
<thead class="thead-dark">
<tr>
<th>No</th>
<th style="width:20px;">Value5</th>
<th style="width:80px;">Value6</th>
<th style="width:150px;">Value7</th>
<th style="width:120px;">Value8</th>
<th style="width:120px;">Value9</th>
<th style="width:130px;">Value11</th>
<th style="width:180px;">Value12</th>
<th style="width:180px;">Value1</th>
<th style="width:180px;">Value2</th>
<th style="width:180px;">Value3</th>
</tr>
</thead>
<tbody>
<template x-for="(field, index) in fields" :key="index">
<tr>
<td x-text="index + 1"></td>
<td x-text="field.value5"></td>
<td x-text="field.value6"></td>
<td>
<p x-text="field.value7"></p>
<p
x-show="field.value7==='RFR' | field.value7==='RFRHC'">
<span x-text="field.value8"></span><span>
℃</span>
</p>
</td>
<td x-text="field.value9"></td>
<td x-text="field.value10"></td>
<td x-text="field.value11"></td>
<td x-show="field.value12">
<p>
<label><b>Value13 </b><span x-text="field.value13"></span></label>
</p>
<p>
<label><b>Value14 </b><span x-text="field.value14"></span></label>
</p>
</td>
<td x-show="!field.value12">
<p>
</p>
</td>
<td class="table-success">
<input x-model="field.value1" type="number" class="form-control"
onchange="setDecimal" min="0" max="10000000" name="value1"
id="value1" step="0.001" value="0.000" required>
</td>
<td class="table-success">
<select x-model="field.value2" class="custom-select" name="value2"
id="value2" required>
<option selected>---</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</td>
<td class="table-success">
<input x-model="field.value3" type="text" class="form-control"
name="value3" id="value3">
</td>
</tr>
</template>
</tbody>
</table>
</p>
</template>
</tr>
<tr>
<td colspan="12" class="text-right"><button type="button" class="btn btn-info"
#click="listField()">+ Add Row</button></td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.2/dist/alpine.min.js" defer></script>