(いいね機能)JavaScriptの非同期通信がリロードしないと反映されない

Question

前提・実現したいこと

いいね機能を実装したくhttps://techtechmedia.com/favorite-function-rails/こちらの記事を参考に実装進めていました。
いいねを押すとカウントされ、いいねを外すとカウント数を減らすというものです

御教授いただけたら幸いです

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

検証ツールではこのように表示されます
いいね、いいね外すを押すと何も変化はしないですが、リロードするとカウントが反映される様にはなっています
何回かいいねボタンを押してリロードするとその回数分反映される状態です

該当のソースコード

index.html.erb

    <div class="post-wrapper">
      <% @menus.each do |menu| %>
        <tr id="menu_<%= menu.id %>">
          <%= render 'shared/menu', menu: menu %>
        </tr>
      <% end %>
    </div>  

_menu.html.erb

<div class="card">
  <div class="image-content">
    <%= link_to image_tag(menu.image, class: :card_img ), menu_path(menu.id) %>
  </div>
  <div class="card-body">
    <%= link_to menu.title, menu_path(menu.id), class: :card_title%>
    <%= link_to "by #{menu.user.nickname}", user_path(menu.user_id), class: :card_user %>
    
    <% if current_user.liked_by?(menu.id) %>
      <td><%= link_to 'いいねを外す', destroy_like_path(menu), method: :DELETE, remote: true %><%= menu.likes.count %></td>
    <% else %>
      <td><%= link_to 'いいねする', create_like_path(menu), method: :POST, remote: true %><%= menu.likes.count %></td>
    <% end %>

  </div>
</div>

create.js.erb

document.getElementById('menu_<%= @menu.id %>').innerHTML = '<%= j(render @menu) %>'

destroy.js.erb

document.getElementById('menu_<%= @menu.id %>').innerHTML = '<%= j(render @menu) %>'

試したこと

https://qiita.com/kjurata/items/70201e0ec781aeb4448dこちらの記事も試した見ましたが
変化なしでした
turbolinksも消しております

補足情報（FW/ツールのバージョンなど）

Rails 6.0.3.6
jqueryは使用していません

Comments

[yambejp]

非同期処理のajaxをjsとして例示された方が良いと思います

[yasu0205]

yambejpさんご指摘ありがとうございます！修正させていただきます

Answer 1

js.erb内の記述を

document.getElementById('menu_<%= @menu.id %>').innerHTML = '<%= j(render partial: 'likes/like', locals: { menu: @menu }) %>'

と変更することで解決しました