Javascript 仅打开距离按钮最近的模式

我有一个页面，其中有一个随机数目的项目，每个项目都有一个按钮和一个模式-因为我不知道有多少项目，我使用的按钮和模式类

当我点击任何按钮时，它将加载所有模态，而我只希望它加载下一个模态——我尝试使用“最近”和“下一个”，但无法让它们开火

<div class="social-button-container">
    <button type="button" class="social-button">Button</button>
</div>

<div class="socialModal modal fade">
    <h2>123</h2>
</div>

<div class="social-button-container">
    <button type="button" class="social-button">Button2</button>
</div>

<div class="socialModal modal fade">
    <h2>234</h2>
</div>

$(document).ready(function () {
    $('.social-button').click(function () {
        $('.socialModal').modal();
        return false;
    });
});

但这根本没用（没有火）

还尝试：

$(document).ready(function () {
    $('.social-button').click(function () {
        $(this).next('.socialModal').modal();
        return false;
    });
});

使用相同的结果-如何在单击相关按钮时仅打开以下模式

---

您的选择器有点不正确，您可能需要先初始化模态

$('.socialModal').modal({show:false});

$('.social-button').click(function () {
    $(this).closest('.social-button-container').next('.socialModal').modal('show');
});

$('.socialModal').modal({show:false});

$('.social-button').click(function () {
    $(this).closest('.social-button-container').next('.socialModal').modal('show');
});

$(document).ready(function () {
                            $('.button').click(function () {
                                $('.Modal').closest().modal();
                                return false;
                            });
                        });