turbo_stream first comment is getting replace by the other comment without reloading page

Question

_post.html.erb

  <div class="card text-center bg-secondary my-2" style="width: 18rem;">
                <div class="card-footer text-body-secondary">
                    <%= post.user.first_name %> <%= post.user.last_name%> posted <%= time_ago_in_words(post.created_at) %> ago
                </div>
                <div class="row">
                    <% if post.medias.attached? %>
                        <% post.medias.each do |media| %>
                            <div class="col-md-6">
                                <%= image_tag file_path(media), class: "rounded mx-auto d-block w-100 mt-2" %>
                            </div>
                        <% end %>
                    <% end %>
                </div>
                <div class="card-body">
                    <p class="card-text"><%= post.description %></p>
                    <%= link_to "View Post", post_path(post), class: "btn btn-dark" %>
                </div>
                <div class="mb-2 row">
                    <div class="col-sm-4">
                        <div class="row">
                            <div class="text-center my-2">
                                <%= pluralize(post.likes.count, "like") %>
                            </div>
                            <div class="text-center my-2"> 
                                <% if current_user_post_like?(post) %>
                                    
                                    <%= link_to likes_path({id: post}), data: {turbo_stream: true, turbo_method: :delete} do %>
                                        <i class="fa-solid fa-heart fa-2xl" style="color: #e31621;"></i>
                                    <% end %>
                                <% else %>
                                    <%= link_to likes_path({id: post}), data: {turbo_stream: true, turbo_method: :post} do %>
                                        <i class="fa-regular fa-heart fa-2xl" style="color: #e1dada;"></i>
                                    <% end %>
                                <% end %>
                            </div>

                        </div>
                    </div>
                    <div class=" col-sm-4 flex-grow-1 p-0">
                        <div class="row">
                            <div class="my-2">
                                <%= pluralize(post.comments.count, "comment") %>
                            </div>
                            <div class="my-2">
                                <%= render 'shared/comments', {post: post} %> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>

_comment.html.erb

<div class="d-flex flex-start">
    <% if comment.user.photo.attached? %>
        <%= image_tag file_path(comment.user.photo) , alt: "avatar", width: "65", height: "65", class: "rounded-circle shadow-1-strong me-3" %>
    <% else %>
        <svg xmlns="http://www.w3.org/2000/svg" width="65" height="65" fill="currentColor" class="bi bi-person rounded-circle shadow-1-strong me-3" viewBox="0 0 16 16">
            <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
        </svg>
    <% end %>
    <div class="flex-grow-1 flex-shrink-1">
        <div>
            <div class="d-flex justify-content-between align-items-center">
                <p class="mb-1">
                    <%= comment.user.first_name %> <span class="small">- <%= time_ago_in_words(comment.created_at) %> ago</span>
                </p>
            </div>
            <p class="small text-start mb-0">
                <%= comment.content %>
            </p>
        </div>
    </div>
</div>

comments_controller.rb

  def create
    @comment = current_user.comments.build(comments_params)
    @comment.post = @post
    if @comment.save
      respond_to do |format|
        format.turbo_stream {  }
      end
    end
  end

create.turbo_stream.erb

<turbo-stream action="append" target="messages">
  <template>
    <div id="message_1">
        <div class="d-flex flex-start">
    <% if @comment.user.photo.attached? %>
        <%= image_tag file_path(@comment.user.photo) , alt: "avatar", width: "65", height: "65", class: "rounded-circle shadow-1-strong me-3" %>
    <% else %>
        <svg xmlns="http://www.w3.org/2000/svg" width="65" height="65" fill="currentColor" class="bi bi-person rounded-circle shadow-1-strong me-3" viewBox="0 0 16 16">
            <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
        </svg>
    <% end %>
    <div class="flex-grow-1 flex-shrink-1">
        <div>
            <div class="d-flex justify-content-between align-items-center">
                <p class="mb-1">
                    <%= @comment.user.first_name %> <span class="small">- <%= time_ago_in_words(@comment.created_at) %> ago</span>
                </p>
            </div>
            <p class="small text-start mb-0">
                <%= @comment.content %>
            </p>
        </div>
    </div>
</div>

    </div>
  </template>
</turbo-stream>

When I add a comment without reloading the page, it appears instantly, but subsequent comments replace the previous one until the page is refreshed, displaying all comments. I expect that when I add a second comment without reloading, both comments should remain visible without replacing each other.

Answer 1

<!-- create.turbo_stream.erb -->

<turbo-stream action="append" target="messages">
  <template>
    <div id="message_1"> <!-- because you have this hardcoded id -->
      ...
    </div>
  </template>
</turbo-stream>

If the template’s first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of appended.

https://turbo.hotwired.dev/reference/streams#append

Change it to something like this:

<%= turbo_stream.append :messages do %>
  <div id="<%= dom_id(@comment) %>">
    ...
  </div>
<% end %>