Elementor Custom code | InputField query selector

I am using elementor custom code and elementor form. I would like to have an auto selector for airports using the API. My code is currently as follows and I am getting a special character error for < & >. Any help would be much appreciated.

const accessKey = 'xxxx';
const    url=`https://app.goflightlabs.com/retrieveAirportaccess_key=${accessKey}&query=${encodeURIComponent(query)}`;

document.addEventListener('DOMContentLoaded', function() {
    const inputField = document.querySelector('#departure');
    const suggestionBox = document.createElement('div');
    suggestionBox.classList.add('suggestion-box');
    inputField.parentNode.appendChild(suggestionBox);

inputField.addEventListener('input', async function() {
    const query = inputField.value;
    return;  // Start suggesting after 2 characters

    try {
        const response = await fetch(`[url]?query=${query}`);
        const suggestions = await response.json();

        suggestionBox.innerHTML = '';  // Clear previous suggestions

        suggestions.forEach(suggestion  {
            const suggestionItem = document.createElement('div');
            suggestionItem.classList.add('suggestion-item');
            suggestionItem.innerText = suggestion;
            suggestionItem.addEventListener('click', function() {
                inputField.value = suggestion;
                suggestionBox.innerHTML = '';
            });
        suggestionBox.appendChild(suggestionItem);
        });
        } catch (error) {
        console.error('Error fetching suggestions:', error);
        }
        });

        document.addEventListener('click', function(event) {
            if (!suggestionBox.contains(event.target) && event.target !== inputField) {
            suggestionBox.innerHTML = '';
        }
    });

});

I am hoping for airport suggestions to be retrieve from the api and used in a selector function of the form.