Toggling HTML Link Text 'show/hide' to show/hide inline form for comment; create unique identifier so that not all comment links change on page?

Question

In my app, I have a model 'comments' which can be submitted to a question, answer, solution or another comment.

Problem is, because the form is a partial and the app uses a Jquery toggle to show/hide the form, when it appears multiple times on a page (since questions have answers and answers have comments, so there can be >= 3 comment forms on a page), pressing one 'add comment' changes all of the 'add comment' links to 'cancel' on the page, and vice versa. How do I avoid this?

_comment.html.erb :

<li class="media comment comment-<%= comment.id %>">

  <%= render partial: "evaluations/vote_wrapper", locals: {voteable: comment} %>

  <div class="media-body">
    <div class="media-item-body">
      <strong>
        <%= render comment.user %>
      </strong>
       <br />
      <%= comment.brief %>
    </div>
    <% unless comment.commentable_type == 'Comment' then %>
      <ul class="media-list comments comment-comments">
        <% if comment.comments.count > 0 %>
        <%= render vote_order(comment.comments.includes(:user)) %>
        <% end %>
      </ul>
      <p class="reply comment">
        <%= link_to "Reply to comment", new_comment_comment_path(comment), remote: true %>
      </p>
      <p class="cancel reply" style="display:none">
        <%= link_to "Cancel", new_comment_comment_path(comment), remote: true %>
      </p>
    <% end %>
  </div>
</li>

new.js.erb for comment

var selector = ".<%= j @commentable.class.to_s.downcase + '-' + @commentable.id.to_s + '    .media-body ' %>"
selector2 = selector + ".<%= j @commentable.class.to_s.downcase %>-comments"

if($("p.add.comment").is(":visible")){ 
    if ($(selector2 + " .js-inline-form").length == 0) {
        $(selector2 )
        .append("<li class='js-inline-form'><%= j render :partial => 'comments/form' %></li>")
}
    else {
    $(selector2 + " .js-inline-form").remove()
    $(selector2) 
        .append("<li class='js-inline-form'><%= j render :partial => 'comments/form' %></li>")
    }
    $("p.add.comment").hide()
    $("p.cancel").show()
}
else if($("p.cancel").is(":visible")){
    $(selector2 + " li.js-inline-form").remove()
    $("p.cancel").hide()
    $("p.add.comment").show()
}
else if($("p.reply.comment").is(":visible")){ 
        if ($(selector2 + " .js-inline-form").length == 0) {
        $(selector2 )
        .append("<li class='js-inline-form'><%= j render :partial => 'comments/form' %></li>")
    }
    else {
        $(selector2 + " .js-inline-form").remove()
        $(selector2) 
        .append("<li class='js-inline-form'><%= j render :partial => 'comments/form' %></li>")
        }
        $("p.reply.comment").hide()
        $("p.cancel.reply").show()
}
else if($("p.cancel.reply").is(":visible")){
    $(selector2 + " li.js-inline-form").remove()
    $("p.cancel.reply").hide()
    $("p.reply.comment").show()
}

This some of the _form for comments:

<%= form_for(@comment, remote: true) do |f| %>
   .........
  <div class="field form-group">
    <%= f.label :brief %><br>
    <%= f.text_area :brief, class: "form-control" %>
    <% if user_signed_in? %>
    <%= hidden_field_tag :user_id, current_user.id %>
    <%= hidden_field_tag :commentable_id, @commentable.id %>
    <%= hidden_field_tag :commentable_type, @commentable.class %>
    <% end %>
  </div>
  <div class="actions">
    <%= f.submit 'Create Comment', :class => "btn btn-primary" %>
  </div>
<% end %>

In comments_controller the new action:

def new
    @comment = @commentable.comments.new
    @comment.commentable_id = params[:commentable_id]
    render layout: "form_left"
end

And _answer.html.erb to show where comments are used again:

 .....
 <p class="add comment">
    <%= link_to "Add comment", new_answer_comment_path(answer), remote: true %>
 </p>
 <p class="cancel" style="display:none">
    <%= link_to "Cancel", new_answer_comment_path(answer), remote: true %>
 </p>
</div>

How do I make these classes unique, so that each link_to click will only actually open the relevant comment form?

Thanks.

Answer 1

The purpose of classes is re-usability, if you want unique you can use ID. I suggest you to follow following pattern.

:id => "Identifier_ModelName_Id"

o/p => "Identifier_Question_15" 

this way your id won't get conflict with other commentables