いいね機能のカウント部分を非同期にしたい

Question

前提・実現したいこと

railsで動画投稿アプリケーションを作っています。
いいね機能実装中に下記の問題が発生しました。

発生している問題・エラーメッセージ

ハートマークの非同期はできていますが、カウントとユーザーネームが押下後消えてしまいます。
![![]
##↓猫です３と猫です２を押下後
![

該当のソースコード

index.html.erb

<ul class="list-unstyled">
  <% @posts.each do |post| %>
    <li class="media">
      <%= link_to post_path(post) do %>
        <%= video_tag post.video.to_s, :size => "360x200" %>
      <% end %>

    <div class="media-body">
      <%= link_to post_path(post) do %>
        <h5 class="mt-0 mb-1"><%= post.title %></h5>
      <% end %>
      <%= post.body %>

      <div id="like-icon-post-<%= post.id.to_s %>", style="display: flex;">
        <% if post.liked_by(current_user).present? %>
          <%= link_to "いいねを取り消す", post_like_path(post.id, post.liked_by(current_user)), method: :DELETE, remote: true, class: "loved hide-text" %>
        <% else %>
          <%= link_to "いいね", post_likes_path(post), method: :POST, remote: true, class: "love hide-text" %>
        <% end %>
        <%= post.like_ids.length %>
        <div id="like-text-post-<%= post.id.to_s %>", style="display: block; margin: 0 0 0 20px">
          <%= render "like_text", { likes: post.likes } %>
        </div>
      </div>
    </div>
  </li>
  <% end %>
</ul>

create.js.erb

$('#like-icon-post-<%= @post.id.to_s %>').
  html('<%= link_to "いいね", post_like_path(@post.id, @like), method: :DELETE, remote: true, class: "loved hide-text" %>');

destroy.js.erb

$('#like-icon-post-<%= @post.id.to_s %>').
  html('<%= link_to "いいねを取り消す", post_likes_path(@post), method: :POST, remote: true, class: "love hide-text" %>');

_like_text.html.erb

<strong>
  <% likes.each.with_index do |like, index| %>
    <% if likes.size == 1 %>
      <%= like.user.nickname %> </strong> が「いいね！」しました
    <% elsif like == likes.last %>
      </strong>and<strong>
      <%= + like.user.nickname %></strong> が「いいね！」しました
    <% elsif index > 1 %>
      </strong><%= "and " + (likes.size-index).to_s + " 他 " %> が「いいね！」しました
      <% break %>
    <% elsif index == likes.size-2 || index == 1 %>
      <%= like.user.nickname %>
    <% else %>
      <%= like.user.nickname + ", " %>
    <% end %>
  <% end %>
</strong>

---

ハートの非同期はできているので、カウントとlike_textの部分が問題なのかと思い、Qiitaなどをみて確認してみましたが、問題がなさそうに見えます。
おそらく...単純なミスだとは思いますが、ご教授いただければと思います。

##追記 4.27

ご教授いただいた点、修正しました。

###↓

<ul class="list-unstyled">
  <% @posts.each do |post| %>
    <li class="media">
      <%= link_to post_path(post) do %>
        <%= video_tag post.video.to_s, :size => "360x200" %>
      <% end %>

    <div class="media-body">
      <%= link_to post_path(post) do %>
        <h5 class="mt-0 mb-1"><%= post.title %></h5>
      <% end %>
      <%= post.body %>

      <div class="left-container">
        <div id="like-icon-post-<%= post.id.to_s %>">
          <% if post.liked_by(current_user).present? %>
            <%= link_to "いいねを取り消す", post_like_path(post.id, post.liked_by(current_user)), method: :DELETE, remote: true, class: "loved hide-text" %>
          <% else %>
            <%= link_to "いいね", post_likes_path(post), method: :POST, remote: true, class: "love hide-text" %>
          <% end %>
        </div>
        <div class="counter">
          <%= post.like_ids.length %>
        </div>
        <div class="favorite">
          <div id="like-text-post-<%= post.id.to_s %>" >
            <%= render "like_text", { likes: post.likes } %>
          </div>
        </div>
      </div>
    </div>
  </li>
  <% end %>
</ul>

$('#like-icon-post-<%= @post.id.to_s %>').
  html('<%= link_to "いいね", post_like_path(@post.id, @like), method: :DELETE, remote: true, class: "loved hide-text" %>');
$('#like-text-post-<%= @post.id.to_s %>').
  html('<%= j render "posts/like_text", { likes: @post.likes } %>');

$('#like-icon-post-<%= @post.id.to_s %>').
  html('<%= link_to "いいねを取り消す", post_likes_path(@post), method: :POST, remote: true, class: "love hide-text" %>');
$('#like-text-post-<%= @post.id.to_s %>').
  html('<%= j render "posts/like_text", { likes: @post.likes } %>');

ですが、どうしても<%= post.like_ids.length %>を反映させる方法が見つかりませんでした...

Answer 1

create.js.erb、destroy.js.erbに<%= post.like_ids.length %>以下のコードが不足しているためではないでしょうか？

Comments

[harabou]

ご回答ありがとうございます。
おっしゃる通りガッツリ抜けてましたので、記述致しました。
ですが、どうしても<%= post.like_ids.length %>を反映させる方法が見つからず、途方にくれています。
作業の最中に修正したindex.html.erbを戻しても関係なさそうでしたし...
上記追記にて記載しました。
もしよろしければ、何か方法をご教授いただきたいです。