Rendering data with dynamic ids be used with jQuery effects in Rails

Question

I am building a Rails app, and there's a layer of complexity in how data in Rails table can be used to control certain actions by JS/jQuery that I am not grasping.

What I am Trying to Do: I have a table called Comments. Let's say it consists of values for post (the string of the comment), slug (which specifies a certain blog page it should appear on), and location (a string value that matches the id of a div on the page). Important: this div is dynamic - there will be a different number of divs on each page labeled "toc_0", "toc_1", and so on.

In the end, I would like to use jQuery's .append() or a similar effect (i.e. prepend(), after() to place a specific comment next to the div with an id that matches location on a page that matches slug.

What I am Doing Now: Showing comments that match the slug value is the easy part, obviously. I am doing that in my Controller like so:

class BlogsController < ActionController::Base

        @posts = Post.where(slug: params[:id]).all
        @comments = Comment.where(slug: params[:id]).all

end 

In the view, I am rendering @comments with a normal loop - putting it in a column next to the post.

    <div class="col-sm-8">
        <% @posts.each do |post| %>
                <h2 id="title"><%= post.title %></h2>
                <p id="category"><%= post.category %></p>
                <div id="paragraph"><%= markdown(post.content) %></div>    
        <% end %>
    </div> 

    <div class="col-sm-4">
        <% @comments.each do |comment| %>
            <div class="card-1">
            <h5 class="testcomment"><%= comment.post %></h5> <h5 class="testauthor"></h5>
            </div>
        <% end %> 

    </div><!-- / column -->

So Where Would the Targeting Happen? I realize from that code, it probably is confusing how we would "target" a comment to a certain div in the post. That's because I am using the Markdown gem, and it labels each header as its own id in the DOM. Example live output for clarity:

 <h3 id="toc_0">Example Heading 1</h3>

     <p>Hello World, this is the first para</p>

 <h3 id="toc_1">Example Heading 2</h3>

When the page renders, I want the controller to not only render comments that match the page's slug (as it does now): I want it to append the comment next to the div id that matches the location column referenced above.

With these ids being dynamic, can I use jQuery to "target" the id without referencing "toc_0", "toc_1" etc., or does this need to be done with some controller magic?

Answer 1

Something that would make this easier is if you added a has_many: comments in the posts model. Then for each Post you could do something where you look to see if it has a comment or set of comments associated with it.

<% @posts.each do |post| %>
 <div class="row">
  <div class="col-sm-8">
    <h2 id="title"><%= post.title %></h2>
    <p id="category"><%= post.category %></p>
    <div id="paragraph"><%= markdown(post.content) %></div>    
  </div>
  <div class="col-sm-4">
    <% if @post.comments.count > 0 %> 
      <% @post.comments.each do |comment| %>
        <div class="card-1">
          <h5 class="testcomment"><%= comment.post %></h5> <h5 class="testauthor"></h5>
        </div>
      <% end %> <!-- end each --> 
    <% end %> <!-- end if -->
  </div>
<% end %> <!-- end each post -->