Showing duplicate comment on page refresh (after initial AJAX append) [Rails] - ruby-on-rails

Question

Can't seem to figure this one out... In my rails app, I have Post and Comment resources. When a new comment is created, I want to reload the list of comments using AJAX. That part seems to work appropriately—however, when the full page is subsequently reloaded, the list also shows a duplicate of the comment, as shown in this screenshot. Any thoughts on what may be causing this?
(note: deleting one of the comments also deletes the duplicate)
views/users/show.html.haml
= form_for([post, post.comments.build], remote: true) do |f|
= f.text_field :content, placeholder: 'Press ENTER to submit...', class: "comment_content", id: "comment_content_#{post.id}"
- if post.comments
.comments{ id: "comments_#{post.id}" }
- post.comments.each do |comment|
= render post.comments, post: post
views/comments/_comment.html.haml
- unless comment.content == nil
.comment{ id: "comment_#{comment.id}" }
.user-name
= link_to comment.user.identities.first.nickname, comment.user
.comment-content
= comment.content
- if comment.user == current_user
= link_to post_comment_path(post, comment), data: { confirm: "Are you sure?" }, method: :delete, remote: true do
%i.fa.fa-close
controllers/comments_controller.rb
class CommentsController < ApplicationController
before_action :set_post
def create
#comment = #post.comments.build(comment_params)
#comment.user_id = current_user.id
if #comment.save
respond_to do |format|
format.html { redirect_to :back }
format.js
end
else
render root_path
end
end
...
views/comments/create.js.erb
$('#comments_<%= #post.id %>').append("<%=j render #post.comments, post: #post, comment: #comment %>");
$('#comment_content_<%= #post.id %>').val('')
Update
Following #uzaif's suggestion, I replaced ".append" with ".html". This fixed the problem only if I also moved the code out of the _comment partial. Not really an ideal solution... I'd still like to know if/how I could fix the problem and keep my individual comment partial.

Answer 1

The Problem
You are seeing duplicate comments because you are inadvertently rendering your comments twice.
- post.comments.each do |comment|
= render post.comments, post: post
Calling render and passing a collection as the first argument instructs Rails to render all of the comments. Internally Rails will iterate over each comment and render it using the object's partial.
By wrapping this render call (which already has a loop in it) within another loop, you are actually rendering each comment twice.
The Solution
Remove the outer post.comments.each loop and just let the render method do it's thing.
= render post.comments
Rails knows to pass along an local variable named comment to each partial, and you should be able to reference the original post by calling comment.post (assuming comment belongs_to :post).
Be careful how you call render
There are a couple different ways to render partials with data from a collection. Make sure you know which one you are using and don't mix-and-match them.
I describe this in another StackOverflow post.
Resources
http://guides.rubyonrails.org/layouts_and_rendering.html#rendering-collections
https://stackoverflow.com/a/40412677/1219460