Но если не брать в расчёт, что что-то становится кривым:
// выбираем все названия городов на "карте"
const cities = document.querySelectorAll(".cyprus-city")
// функция-обработчик
const setCityActiveHandler = (id) => {
cities.forEach(city => {
// если не подходит айди из датасета, то только убираем класс active, если он вообще есть, и выходим из функции. датасет я использую в данном случае, потому что, скорее всего, вы используете генерацию html из html, а не из js. А понимать какой город кликнут как-то да надо, кроме как по сравниванию имён. поэтому вам нужно на города прописать атрибуты data-id="1", data-id="2"...
if (city.dataset.id != id) {
city.classList.contains('active') ? city.classList.remove('active') : ''
return
}
// если город имеет нужный айди, то ставим active
city.classList.add('active')
})
}
// вешаем слушатель события "клик" на каждое название города и нашу функцию-обработчик в роли коллбэка
cities.forEach(city => city.addEventListener('click', e => setCityActiveHandler(e.target.dataset.id)))