using google programmable search engine Options

[miorma]

Hi all, sorry but my I'm quite new in this and Im stucked with someting that thought it was going to be simpler.
Im trying to use several google searches in my site depending on the selection made by user. Also depending on the selection a translation will be made and simultaneous searches will appear. However the results are not constant, sometimes appear correctly, sometimes no, I thought it was something to do with the clearance of previous results, but still gives wrong results. I mean it uses incorrect google ids, when pressing "search button" and not even changing the previous selections the results are different each time (mixing google search ids..) I would really appreciate your help and help me find the error(s) in the code: I include a copy here:
Many thanks:

<div class="search-container">
<label for="fabricante">Fabricante</label>
<select id="fabricante" name="fabricante" onchange="populateTipos()">
<option value="">Select Fabricante</option>
<option value="B">B</option>
<option value="A ">A </option>
</select>
</div>

<div class="search-container">
<label for="tipo">Tipo</label>
<select id="tipo" name="tipo">
<option value="">Select Tipo</option>
</select>
</div>

<div class="search-container">
<label for="extraText">Additional Text</label>
<input type="text" id="extraText" placeholder="Enter additional text" onkeypress="checkEnter(event)" />
</div>

<div class="search-container">
<button onclick="performSearch()">Search</button>
</div>

<div class="search-results-container">
<div class="search-results-column">
<div class="gcse-searchresults" id="searchresults1"></div>
</div>
<div class="search-results-column">
<div class="gcse-searchresults" id="searchresults2"></div>
</div>
</div>

<script>
var tipos = {
B: ["1", "2", "3"],
'A': ["4", "5", "6"]
};

var cseIds = {
'A': 'd1c505ecb5da14bXX',
B: {
spanish: 'a518d8db7c8334eYY',
german: '342daa766f4b74aZZ'
}
};

function populateTipos() {
var fabricanteSelect = document.getElementById('fabricante');
var tipoSelect = document.getElementById('tipo');
var selectedFabricante = fabricanteSelect.value;

tipoSelect.innerHTML = '<option value="">Select Tipo</option>';

if (selectedFabricante) {
tipos[selectedFabricante].forEach(function(tipo) {
var option = document.createElement('option');
option.value = tipo;
option.textContent = tipo;
tipoSelect.appendChild(option);
});
}
}

function loadGoogleCSE(cx, divId, query, gname) {
var gcseScript = document.createElement('script');
gcseScript.type = 'text/javascript';
gcseScript.async = true;
gcseScript.src = 'https://cse.google.com/cse.js?cx=' + cx;

gcseScript.onload = function() {
google.search.cse.element.render({
div: divId,
tag: 'searchresults-only',
gname: gname // Unique identifier for the search engine
});

google.search.cse.element.getElement(gname).execute(query);
};

var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcseScript, s);
}

function performSearch() {
var fabricante = document.getElementById('fabricante').value;
var tipo = document.getElementById('tipo').value;
var extraText = document.getElementById('extraText').value;

if (fabricante) {
var searchResultsElement1 = document.getElementById('searchresults1');
var searchResultsElement2 = document.getElementById('searchresults2');

searchResultsElement1.innerHTML = ''; // Clear previous results
searchResultsElement2.innerHTML = ''; // Clear previous results

var query1 = fabricante + " " + tipo + " " + extraText;

if (fabricante === 'B') {
loadGoogleCSE(cseIds.B.spanish, 'searchresults1', query1, 'B_spanish');

var query2 = fabricante + " " + tipo + " " + translateToGerman(extraText);
loadGoogleCSE(cseIds.B.german, 'searchresults2', query2, 'B_german');
} else {
loadGoogleCSE(cseIds[fabricante], 'searchresults1', query1, 'A');
searchResultsElement2.innerHTML = ''; // Clear second column for A
}
}
}

function translateToGerman(text) {
// De momento, devolvemos el texto original
return text;
}

function checkEnter(event) {
if (event.key === 'Enter') {
performSearch(); // Perform search on Enter key press
}
}
</script>

</body>
</html>