After clone dropdown keep value of one selected option and reset the second dropdown jquery

I have a table with 2 linked dropdowns that I must clone on select the Services dropdown. The second dropdown is popped up according to the selection of the first dropdown (this part works).
I successfully clone them. However, each clone must keep the selected value of the Area dropdown and the Services dropdown must keep the result but with unselected option.

 		<table class="table table-sm table-striped mb-0">
	<thead>
	<tr class="bg-th">
	<th >
	Country
	</th>
	<th scope="col">
	Towns
	</th>

	</tr>
	</thead>

	<tbody>
	<tr>
	<td >
	<select class="form-select" onChange="center_area_on_change(this);">
	<option value=""></option>

	</select>
	</td>
	<td style="width:280px;display:block">

	<select style='width:100%' onChange="getTarifDataSeguroPrivado(this);">


	</select>


	</td>

	</tr>
  </tbody>
	</table>

*The center_area_on_change function pops up the Services dropdown on select.

*The getTarifDataSeguroPrivado function calls the function that clones the row (function addRow).

function getTarifDataSeguroPrivado(dropDown) {

  addRow();

}

The addRow() function.*

function addRow() {

var tableBody = $('#table-tarifario').find("tbody");
var trLast = tableBody.find("tr:last");

var trNew = trLast.clone();


trNew.find('select').val(function(index, value) {
return trLast.find('select').eq(index).val();
});

trLast.after(trNew);

}

1. How can I keep the selected value of the area dropdown, and keep the result of the services dropdown with not selected data when a new row is cloned?

2- I tried to use select2, but it cannot apply to all the dropdowns, although I destroy them like:
$("select").select2("destroy");

I'm not sure that I fully understand what you are asking. Also, I found it difficult to reproduce your issue because you provided code seems incomplete - the <select> menus have no options and the table selector, '#table-tarifario', does not exist.

However, I am providing some code that should at least get you close to what you are looking for. I am taking the index of the selected option in the last row and using it to set the selected option on the new row.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function center_area_on_change (el) {
console.log(el);
}
function getTarifDataSeguroPrivado(dropDown) {
addRow();
}
function addRow() {
$('table select').select2('destroy');
var tableBody = $('table').find("tbody");
var trLast = tableBody.find("tr:last");
var trNew = trLast.clone();
const lastSelectedCountryIndex = trLast.find('select').eq(0).find('option:selected').index();
trNew.find('select').eq(0).find('option').eq(lastSelectedCountryIndex).prop('selected', true);
trLast.after(trNew);
$('table select').select2();
}
$('table select').select2();

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<table class="table table-sm table-striped mb-0">
<thead>
<tr class="bg-th">
<th>
Country
</th>
<th scope="col">
Towns
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-select" onChange="center_area_on_change(this);">
<option value=""></option>
<option>Country 1</option>
<option>Country 2</option>
<option>Country 3</option>
<option>Country 4</option>
</select>
</td>
<td style="width:280px;display:block">
<select style='width:100%' onChange="getTarifDataSeguroPrivado(this);">
<option></option>
<option>Town 1</option>
<option>Town 2</option>
<option>Town 3</option>
<option>Town 4</option>
<option>Town 5</option>
</select>
</td>
</tr>
</tbody>
</table>

<!-- end snippet -->

Alternatively, if you have value attributes on your options, you could do this by value:

function addRow() {
var tableBody = $('table').find("tbody");
var trLast = tableBody.find("tr:last");
var trNew = trLast.clone();
const lastSelectedCountryInddex = trLast.find('select').eq(0).find('option:selected').index();
const lastSelectedCountry = trLast.find('select').eq(0).val();
trNew.find('select').eq(0).val(lastSelectedCountry);
trLast.after(trNew);
}

Update: When using Select2, you must be sure to remove Select2 - $('select').select2('destroy') - before cloning. Once the cloned row has been inserted into the DOM, you can re-apply Select2 - $('select').select2(). I have updated the code example to use Select2.