How to show just the first matched selector on click when there may be multiple identical selectors
<p>I have a series of read more buttons with accompanying div content, unfortunately these read more and content divs cant be wrapped together so I was wondering what is the best way to display the correct content when a read more link is clicked, I've tried .closest and .next with no success.</p>

<p><strong>Fiddle:</strong> <a href="http://jsfiddle.net/QJcFf/1/" rel="nofollow">http://jsfiddle.net/QJcFf/1/</a></p>

<p><strong>JS</strong></p>

<pre><code>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') );

});
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="main-content"&gt;
    &lt;p&gt;lorem ipsum &lt;a href="#" class="readmore"&gt;Read more&lt;/a&gt;&lt;/p&gt;

    &lt;div class="more-ctn"&gt;
        &lt;p&gt;Content for first readmore&lt;/p&gt;
    &lt;/div&gt;

    &lt;p&gt;lorem ipsum &lt;a href="#" class="readmore"&gt;Read more&lt;/a&gt;&lt;/p&gt;

    &lt;div class="more-ctn"&gt;
        &lt;p&gt;Content for first readmore&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
