Add Function to Country Feild

Hello, i need to Change City Subfield to Dropdown in country Field when i select UAE Country in Country Subfield

<script>
function initUAECityDropdown(form) {
  const cityMap = {
    "United Arab Emirates": [
      "Abu Dhabi",
      "Dubai",
      "Sharjah",
      "Ajman",
      "Umm Al Quwain",
      "Fujairah",
      "Ras Al Khaimah"
    ]
  };

  const countrySelect = form.querySelector('[name="address-1-country"]');
  const cityInput = form.querySelector('input[name="address-1-city"]');

  if (!countrySelect || !cityInput || form.querySelector('.custom-select-wrapper')) return;

  // Create custom dropdown
  const wrapper = document.createElement('div');
  wrapper.className = 'custom-select-wrapper';
  wrapper.style.display = 'none';

  const trigger = document.createElement('div');
  trigger.className = 'custom-select-trigger';
  trigger.innerHTML = '<span>Select City</span><i class="arrow">▾</i>';

  const dropdown = document.createElement('ul');
  dropdown.className = 'custom-options';

  wrapper.appendChild(trigger);
  wrapper.appendChild(dropdown);
  cityInput.parentNode.insertBefore(wrapper, cityInput.nextSibling);

  function populateDropdown(options) {
    dropdown.innerHTML = '';
    options.forEach(option => {
      const li = document.createElement('li');
      li.className = 'custom-option';
      li.textContent = option;
      li.dataset.value = option;
      dropdown.appendChild(li);
    });
  }

  function activateDropdownBehavior() {
    trigger.addEventListener('click', () => {
      wrapper.classList.toggle('open');
    });

    dropdown.addEventListener('click', (e) => {
      if (e.target.classList.contains('custom-option')) {
        const value = e.target.dataset.value;
        trigger.querySelector('span').textContent = value;
        cityInput.value = value;
        wrapper.classList.remove('open');
      }
    });

    document.addEventListener('click', (e) => {
      if (!wrapper.contains(e.target)) {
        wrapper.classList.remove('open');
      }
    });
  }

  countrySelect.addEventListener('change', function () {
    const selected = this.value.trim().toLowerCase();

    if (selected === "united arab emirates") {
      populateDropdown(cityMap["United Arab Emirates"]);
      wrapper.style.display = 'block';
      cityInput.style.display = 'none';
      cityInput.value = '';
      trigger.querySelector('span').textContent = 'Select City';
    } else {
      wrapper.style.display = 'none';
      cityInput.style.display = 'inline-block'; // ensure it's visible again
      cityInput.value = '';
    }
  });

  // Initialize on load if UAE is pre-selected
  if (countrySelect.value.trim().toLowerCase() === "united arab emirates") {
    populateDropdown(cityMap["United Arab Emirates"]);
    wrapper.style.display = 'block';
    cityInput.style.display = 'none';
  }

  activateDropdownBehavior();
}

// Run on initial page load
document.addEventListener('DOMContentLoaded', function () {
  const form = document.querySelector('form[data-form-id="935"]');
  if (form) initUAECityDropdown(form);
});

// Re-run after Forminator AJAX render
document.addEventListener('forminator:render:after', function (event) {
  const form = event.target.querySelector('form[data-form-id="935"]');
  if (form) initUAECityDropdown(form);
});
</script>




<style>
    .custom-select-wrapper {
  position: relative;
  width: 100%;
  font-family: 'Arial', sans-serif;
  display: none;
  z-index: 99;
}

.custom-select-trigger {
  background: #fff;
  border: 1px solid #ccc;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: border-color 0.2s;
}

.custom-select-wrapper.open .custom-select-trigger {
  border-color: #0073aa;
}

.custom-select-trigger .arrow {
  margin-left: 10px;
  font-size: 14px;
  transition: transform 0.3s;
}

.custom-select-wrapper.open .custom-select-trigger .arrow {
  transform: rotate(180deg);
}

.custom-options {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: none;
}

.custom-select-wrapper.open .custom-options {
  display: block;
}

.custom-option {
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.custom-option:hover {
  background-color: #f5f5f5;
}

</style>

i write this code, but i have some errors, the first error when i change the country to other than the UAE

i need the city subfield to back like input text, also i need when user select form dropdown to show in summation reports

The page I need help with: [log in to see the link]