Targeting css class of one single variable in embedded ruby loop using coffeescript

Question

My apologies for the confusing title. I am not very sure how to describe this question, please suggest alternative titles if possible!

I'm building a web app where you can like an answer, like most social apps. The problem is, I am new to using coffeescript and erb, so I am not sure how to target my jQuery animations to specific elements.

So my html.erb file looks like this. It has a ERB loop where I go through each answer and display it.

<% @question.answers.each do |answer| %>
        <div class="row">
                <div class="col-lg-2 col-sm-2">
                    <div class="like">
                        <button class="heart-btn">
                        </button>
                        <div class="liked">
                            +1
                        </div>
                    </div>
                    <div class="option">
                        <a href='/'>Report</a>
                        <br><a href='/'>Edit</a>
                        <br>

                         <%= link_to 'Delete', question_answer_path(@question, answer), method: :delete, data: { confirm: 'Are you sure?' } %>  
                    </div>
                </div>
                <div class="col-lg-10 col-sm-10">
                    <div class="row" style="margin:0">
                        <!-- USER PROFILE -->
                        <a href='/users/2/profile'>
                            <div class="mini-profile">
                                <%= image_tag(@tutor.picture_url) %>
                                <ul style="list-style-type:none">
                                    <li class="username"><%= @tutor.username %></li>
                                    <li><i class="fa fa-flag" style="padding: 2px"></i><%= @tutor.country %></li>
                                    <li><i class="fa fa-graduation-cap"></i><%= @tutor.educational_level %></li>
                                </ul>
                            </div>

                        </a>
                    </div>
                    <div class="row">
                        <div class="ans-box">
                            <ul style="list-style-type:none">
                                <li><strong>This answer was written on:</strong> <%= answer.created_at %></li>

                                <li class="ans-content"><strong>This is my answer:</strong> <%= raw answer.answercontent %></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="line">
        <% end %>

Now, for the div of class 'like', I have the following js written (document ready omitted):

# Heart like
$(".heart-btn").click ->
    $(this).toggleClass('clicked')
    $(".liked").show().fadeOut(500)

the 'liked' class is the +1 that will show when the heart is clicked.

But as you can probably imagine, this makes ALL the hearts on the page display the '+1'. I want to target only the 'heart' of the 'answer' that was clicked. I reckon I can do this by referencing the current 'answer' as a dom object, but I am unsure on how to do this. My attempt is doing something like:

# Heart like
current_ans = <%= answer %>
$(".heart-btn").click ->
    $(this).toggleClass('clicked')
    current_ans.$(".liked").show().fadeOut(500)

But the syntax seems very off to me and it doesn't seem to work.

(I think partially I'm not finding the solution because I cannot phrase my question so well. Please advise if this is the case. Thanks!)

Answer 1

jQuery closest is ideal for this:

$(".heart-btn").click ->
  $(this).toggleClass('clicked')
  $(this).closest('.like').find(".liked").show().fadeOut(500)