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

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)