jQuery открывает последнее всплывающее окно класса, данное ему

Question

Позвольте мне объяснить название. У меня есть несколько divs с той же структурой, что-то вроде этого:

<div class="description" >
    <div class="popup">
    hey
    </div>
    <button class="details" onclick="openpopup">details </button>
</div>
<div class="description" >
    <div class="popup">
    hey
    </div>
    <button class="details" onclick="openpopup">details </button>
</div>
<div class="description" >
    <div class="popup">
    hey
    </div>
    <button class="details" onclick="openpopup">details </button>
</div>

И это jquery, что я написал:

$(".details").click(function () {
    $(".popup").css("display","block");
});

Но это показывает только последнее всплывающее окно Независимо от того, какая кнопка нажата, я знаю, в чем проблема, но я не знаю, как ее исправить. И я не могу посылать разные идентификаторы для каждого из divs, потому что они будут динамическими c и приходят с сервера, поэтому я тоже не могу использовать что-то подобное.

Answer 1

Один из способов исправить это - обратиться к родителю, а затем найти его дочерний всплывающий блок. Попробуйте вот так:

$(".details").click(function () {
    $(this).parent().find(".popup").css("display","block");
});