Как разместить два попапа на одной странице?

Question

[Анастасия]

У меня есть вот такой попап на странице:

<button class="popup-btn"></button>
<div class="popup">
    <div class="popup-content">
        Content
        <div class="popup-close"></div>
    </div>
</div>

$(document).ready(function () {
var popup = $(".popup");
var openpopup = $(".popup-btn");
var contentpopup = $(".popup-content");
openpopup.click(function (e) {
popup.addClass("show");
e.preventDefault();
});
$(document).mouseup(function (e) {
if (!contentpopup.is(e.target) && contentpopup.has(e.target).length === 0) {
popup.removeClass("show");
}
});
});

.popup {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.popup.show {
    visibility: visible;
    opacity: 1;
    overflow: hidden;
}

.popup-content {
    margin: auto;
    width: 360px;
    position: relative;
}

Я хочу добавить еще один попап на эту же страницу не дублируя код, потому что попапы одинаковы, только меняется наполнение в .popup-content
То есть есть две кнопки с классом .popup-btn но при нажатии на них открываются два попапа .popup одновременно.
Подскажите, пожалуйста, есть ли какой-то способ сделать это без дублирования кода и изменения названия классов?

Answer 1

[ksnk]

https://jsfiddle.net/jdLf2ae5/
Не оно ?

Answer 2

[maxeee52]

нечто такое

$(document).ready(function () {
        var openpopup = $(".popup-btn");

        $(openpopup).on('click', (function (e) {
            e.preventDefault();
            $(this).addClass("show");
        });
        
        $(openpopup).on('mouseup', (function () {

            let contentpopup = $(this).find('.popup-content');
            
            if (!contentpopup.is(e.target) && contentpopup.has(e.target).length === 0) {
                $(this).removeClass("show");
            }
        });
    });

Answer 3

[Владислав Черненко]

Вам нужен другой подход... Например, передать ID нужного окна:

<a href="#popup-id-1" class="popup-link">Open 1</a>
<a href="#popup-id-2" class="popup-link">Open 2</a>

<div id="popip-id-1" class="popup"></div>
<div id="popip-id-2" class="popup"></div>

$('.popup-link').click(function (e) {
  e.preventDefault();
  var $data = $(this).attr('href');
  $($data).fadeIn();
});