我有一个页面，其中有一个随机数量的项目，每个项目都有一个按钮和一个模态-因为我不知道有多少项目将有我使用类的按钮和模态。
当我点击任何一个按钮时，它会加载所有的模态，而我只想让它加载下一个模态-我试过使用最近的和下一个，但无法让它们启动。

<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 () {
        $('.socialModal').next().modal();
        return false;
    });
});

但这一点也不起作用（不着火）
还尝试：

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

同样的结果-我如何才能得到只有以下模态打开点击相关按钮？
http://jsfiddle.net/0v0pg7fx/