根据多个数据值显示/隐藏div

Question

这让我发疯。无法从 chatgpt 或 reddit 获得明确的答案。 也许stackoverflow有人愿意帮助我或提供指导。

描述： 激活按钮时，必须显示其数据中的城市（下面的 div）。当按钮被停用时，其数据中的城市必须隐藏，但是，当数据中有另一个具有相同城市的活动按钮时，则不会隐藏。

在我激活所有按钮后，我开始一个接一个地停用按钮之前，它工作正常。 我如何全局检查是否有其他活动按钮具有相同的活动城市，以便它们在取消活动时不会被隐藏？

到目前为止我能想出这个：

$('.city-button').click(function() {
    const btns = $('.city-button');
    const cities = $(this).data('cities').split(', ');

    if($(this).hasClass('active')){
        for (let i = 0; i < cities.length; i++) {
            $(this).removeClass('active')   
            $('#' + cities[i]).hide()
        }
    }else{
        for (let i = 0; i < cities.length; i++) {
            $(this).addClass('active')  
            $('#' + cities[i]).show()
        }
    }
});

.city {display: none;}
.active {background-color: yellow; color: black;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="city-button" type="button" data-cities="toronto, seattle">toronto, seattle</button>
<button class="city-button" type="button" data-cities="miami, seattle">miami, seattle</button>
<button class="city-button" type="button" data-cities="atlanta">atlanta</button>

<div id="toronto" class="city">toronto</div>
<div id="seattle" class="city">seattle</div>
<div id="miami" class="city">miami</div>
<div id="atlanta" class="city">atlanta</div>