Apply click event only to the targeted class jQuery

Question

This question might be asked earlier, but I was not able to grasp the answers since there were a lot bunch of codes in every questions. I don't know how to put it in words. I think you guys will understand the situation once you see the code.

HTML

                            <div class="row">
                                <div class="large-9 columns">
                                    <h3>By Christian Christiansen</h3>
                                </div>
                                <div class="large-3 columns">
                                    <p class="raty"></p>
                                </div>
                                <div class="large-11 large-offset-1 columns">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, quasi nisi optio, earum facilis perspiciatis temporibus nobis nam velit incidunt. Recusandae accusamus pariatur, explicabo iure ea ex perspiciatis perferendis quam!</p>
                                </div>
                                <div class="large-8 columns">
                                    <img src="images/comments.png" alt="">
                                    <p class="inline_cmt">Comments (3)</p>
                                </div>
                                <div class="large-2 columns">
                                    <img src="images/reply.png" alt="">
                                    <p class="inline_rply">Reply</p>
                                </div>
                                <div class="large-2 columns">
                                    <img src="images/report.png" alt="">
                                    <p class="inline_rep">Report</p>
                                </div>
                                <div class="large-12 columns reply_box">
                                    <label>
                                        <textarea placeholder="submit your reply here.."></textarea>
                                    </label>
                                    <a href="#" class="button right">Submit</a>
                                </div>
                                <hr>
                            </div>
                            <div class="row">
                                <div class="large-9 columns">
                                    <h3>By Christian Christiansen</h3>
                                </div>
                                <div class="large-3 columns">
                                    <p class="raty"></p>
                                </div>
                                <div class="large-11 large-offset-1 columns">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, quasi nisi optio, earum facilis perspiciatis temporibus nobis nam velit incidunt. Recusandae accusamus pariatur, explicabo iure ea ex perspiciatis perferendis quam!</p>
                                </div>
                                <div class="large-8 columns">
                                    <img src="images/comments.png" alt="">
                                    <p class="inline_cmt">Comments (3)</p>
                                </div>
                                <div class="large-2 columns">
                                    <img src="images/reply.png" alt="">
                                    <p class="inline_rply">Reply</p>
                                </div>
                                <div class="large-2 columns">
                                    <img src="images/report.png" alt="">
                                    <p class="inline_rep">Report</p>
                                </div>
                                <div class="large-12 columns reply_box">
                                    <label>
                                        <textarea class="custom_textarea" placeholder="submit your reply here.."></textarea>
                                    </label>
                                    <a href="#" class="button right">Submit</a>
                                </div>
                                <hr>
                            </div>


<div class="large-12 columns reply_box">
     <label>
       <textarea placeholder="submit your reply here.."></textarea>
     </label>
     <a href="#" class="button right">Submit</a>
</div>

I have the same html multiple times in my code, What I want to achieve is, I want the div with classname reply_box to appear whenever I click the element with classname inline_reply. I have used jQuery toggle method to achieve this and the code is,

jQuery

    $(".inline_rply").click(function() {
        $(".reply_box").toggle();
    });  

My Problem: Whenever I click the reply button, all the elements having the classname reply_box are toggled whereas I just want to toggle only the one that I have clicked. I don't want to add different classnames to all div's since there will be numerous posts. Is there an easy way to do it? I heard that this can be done using this. But I donno how. Anyone with a simple example will be much appreciated. I think I have not confused you guys.

Answer 1

as i think you have to use the next keyword as the following

$(".inline_rply").click(function() {
        $(this).closest('div').next('.reply_box').toggle();
    });

** updation as per your html **

There is an another div having text Report, so for this you can use next again as following

$(".inline_rply").click(function() {
        $(this).closest('div').next().next('.reply_box').toggle();
    });

next() traverse the node one by one as per the selector.

Hope it helps...

Answer 2

I think you just apply this and check may be solve your problem .

$(".inline_rply").click(function() {
        $(this).parent().next(".reply_box").toggle();
    });

Updated Answer

$(".inline_rply").click(function() {
        $(this).parent().next().next(".reply_box").toggle();
    }); 

Demo

Demo 2

Answer 3

use this to target current element

$(".inline_rply").click(function() {
      $(this).closest('div.large-2').next(".reply_box").toggle(); // this will be the clicked 
});  

.closest() will get the nearest parent element specified with class name and with next() you can target the next .reply_box class containing element.