I have a form that has multiple lookup fields. I want to get user-selected entries from a lookup field (set display type as a dropdown) and I created a js function with google Maps API that works based on those entries. The function is below.

document.querySelector('#field_cityname-0').addEventListener('change', function(e) {
if( this.value != '' && cities.hasOwnProperty( this.value ) ) {
markers.forEach( mkr => mkr.setMap( null ) );
let obj = cities[ this.value ];

markers.push( addmarker( obj.lat, obj.lng, obj.name ) );
console.log("The city is "+this.value);

return true;
}
alert('Oh no ' + this.value + ' not found')
})

This function is located inside of the main initMap() function. The issue is, when I try to use this custom function with HTML select element, this works perfectly but when formidable forms this function does not work properly. But the user-selected values are passing only outside the initMap() function not inside it. To check that I have used this short js code.

var newElement = document.getElementById("field_cityname-0");
newElement.addEventListener('change', function(){
console.log(this.value + " item selected");
});

This code receives the user-selected values because it's located outside the initMap() function. When I put this code inside of the initMap() function, this won't work either. Also, I added the custom script file after the form by using the form HTML section. Is there any different way to do this?