DmSS1997

Это задача для фильтра.

Идентификаторы должны быть уникальны. Вместо вывода разметки модального окна для каждого элемента, нужно разметку вывести один раз и написать js-код, который будет подставлять нужные данные в модельное окно перед его показом.

нужно подписаться на пролслушку события на изменение размеров окна:

window.addEventListener('resize', onResizeHandler, false);
function onResizeHandler() {
    // handle the resize event
 }

Как-то так.

<div class="cityInfo" data-city="1">
    <span class="cityInfo__city" data-city="1">1</span>
    <span class="cityInfo__city" data-city="2">2</span>
</div>
<button class="cityToggler" data-city="1">toggle 1</button>
<button class="cityToggler" data-city="2">toggle 2</button>

.cityInfo .cityInfo__city { display: none; }
.cityInfo[data-city="1"] .cityInfo__city[data-city="1"] { display: block; }
.cityInfo[data-city="2"] .cityInfo__city[data-city="2"] { display: block; }

document.addEventListener('click', function (e) {
    if (e.target.closest('.cityToggler')) {
        document.querySelectorAll('.cityInfo').forEach(cityInfo => {
            cityInfo.dataset.city = e.target.closest('.cityToggler').dataset.city;
        });
    }
});