 <p>Try:</p> <pre><code>$('.btn-reply').click(function(){ $(this).parents('.roar').siblings('.newreply').toggleClass('show'); return false; }); </code></pre> <p>However, I agree with <code>Francisc</code> that a better approach would be to modify the <code>HTML</code> and assign a unique <code>id</code> to each message set. That way you can grab the <code>.newreply</code> to show based on a shared unique <code>id</code> which would be agnostic regarding the positioning of the <code>HTML</code> layout.</p> <p>E.g.</p> <pre><code>&lt;div class="roar" rel="msg0"&gt;...&lt;/div&gt; ... &lt;button class="btn-reply" rel="msg0"&gt;&lt;/button&gt; ... &lt;div class="newreply" rel="msg0"&gt;...&lt;/div&gt; ... </code></pre> <p>Then your jQuery becomes:</p> <pre><code>$('.btn-reply').click(function(){ var id = $(this).attr('rel'); var selector = '.newreply[rel=' + id + ']'; $(selector).toggleClass('show'); return false; }); </code></pre>