JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <a href="#" id="city">change city</a>
    <a href="#" id="login">login</a>
</div>
<div>
    <p id="city-popup" class="popup-behavior">select with city list</p>
    <p id="login-popup" class="popup-behavior">login form</p>
</div>

CSS

.popup-behavior { display: none; position: absolute; left: 10px; right: 20px; }

JavaScript

var popupHide = function(e) {
    $('.popup-behavior').each(function(i, e) {
        if ($(e).css('display') == 'block') { $(e).fadeOut(100); };
    });
    $(document).unbind('click.hidePopup');
};

var popupShow = function(e) {

    e.preventDefault();

    if ($(e.data.popup).css('display') == 'none') {

        popupHide();
        e.stopPropagation();
        $(document).bind('click.hidePopup', function(e) {
            if ($(e.target).closest('.popup-behavior').length == 0) {
                popupHide();
            }
        });
        $(e.data.popup).fadeIn(100);

    };

};

$('#city').bind('click', { popup: '#city-popup' }, popupShow);
$('#login').bind('click', { popup: '#login-popup' }, popupShow);