Javascript 当可能有多个相同的选择器时，如何在单击时仅显示第一个匹配的选择器

我有一系列的“阅读更多”按钮和附带的div内容，不幸的是，这些“阅读更多”和“内容”div无法包装在一起，因此我想知道当单击“阅读更多”链接时，显示正确内容的最佳方式是什么，我已尝试了。最近的和。下一步，但没有成功

小提琴：

JS

var readMore = $('.readmore');


readMore.on('click', function(e) {

   e.preventDefault();

   var el = $(this);
    console.log(el);

   el.next('.more-ctn').show();
    console.log( el.closest('.more-ctn') );

});

HTML

<div class="main-content">
    <p>lorem ipsum <a href="#" class="readmore">Read more</a></p>

    <div class="more-ctn">
        <p>Content for first readmore</p>
    </div>

    <p>lorem ipsum <a href="#" class="readmore">Read more</a></p>

    <div class="more-ctn">
        <p>Content for first readmore</p>
    </div>
</div>

同侧眼睑

first readmore的内容

同侧眼睑

first readmore的内容

只需替换以下代码：

el.next('.more-ctn').show();

对于这一个：

el.parent().next('.more-ctn').show();

看