いいね機能の非同期通信を教えていただきたいです

Question

Ruby on Railsで非同期通信のいいね機能の実装に取り組んでいますが
エラーが出て非同期でいいねができない状態です。
現在は同期通信ではいいねはできます。

解決方法を教えて下さい。

発生している問題・エラー

ActionView::Template::Error (undefined method `id' for nil:NilClass):
$("#like_heart_<%= @post.id %>").html("<%= j(render 'likes/like', locals: {post: @post}) %>");

app/views/likes/create.js.erb:1

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。
<%= @post.id %>ここが間違っているかと仮定して変更したりしましたが
実装にまでたどりつきません。
お時間ある方お願いします。

class LikesController < ApplicationController
  def create
    post = Post.find(params[:post_id])
    @like = Like.create(user_id: current_user.id, post_id: post.id)
  end

  def destroy
    post = Post.find(params[:post_id])
    @like = Like.find_by(user_id: current_user.id, post_id: post.id)
    @like.destroy
  end
end

<main class="main">
<div class= "null">
</div>
<div id="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=<%=ENV['GOOGLE_MAP_KEY']%>&callback=initMap&v=weekly"
      async
    ></script>
    <script>
    let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: <%= @post.latitude %>, lng: <%= @post.longitude %>},
    zoom: 15,
  });
  var marker = new google.maps.Marker({
      position: { lat: <%= @post.latitude %>, lng: <%= @post.longitude %>},
      map: map,
      title: "<%= @post.address %>"
    });
}
    </script>

  <div class="inner">
    <div class="post__wrapper">
      <div class="post_show_image">
        <%= image_tag @post.image.variant(resize: '500x500'), class: "post_show_image" %>
      </div>
      <div class="post__body">
        <div class="post_address">
          <%= @post.address %>
          <div id="like_heart_<%= @post.likes %>">
            <%= render partial: "likes/like", locals: {  post: @post, likes: @likes } %>
          </div>
        </div>
        <div class="post_spring_quality">
          <div class="detail__message">
            泉質:
            <%= @post.spring_quality %>
          </div>
        </div>
        <div class="post_description">
          <div class="detail_description">
            <%= @post.description %>
          </div>
        </div>
        <div class="post_bottom">
        <div class="post_name">
          投稿者:
          <%= link_to @post.user.name, user_path(@post.user), class: :post__user %>
          </div>
          <div class="post_comment">
          "コメント"
          </div>
        </div>
        <% if user_signed_in? %>
          <%= form_with model: [@post, @comment], local: true do |f|%>
            <div class="input">
              <%= f.text_field :content, id:"comment_content" %>
            </div>
            <div class="actions-comment">
              <%= f.submit "送信する", class: :comment__btn  %>
            </div>
          <% end %>
        <% end %>
        <div class="comments_lists">
          <% @comments.each do |comment| %>
            <div class="comments_list">
              <%= link_to "#{comment.user.name}:", user_path(comment.user), class: :comment_user %>
              <%= comment.content%>
            </div>
            <% if user_signed_in? && current_user.id == comment.user_id %>
            <%= link_to "削除", post_comment_path(comment.post.id, comment.id), method: :delete,class: :comment_delete %>
            <% end %> 
          <% end %>
        </div>
  
      <% if user_signed_in? && current_user.id == @post.user_id %>
         <div class="post__manage"> 
           <%= link_to "編集する", edit_post_path(@post.id), method: :get,class: :post__btn %> 
           <%= link_to "削除する", post_path(@post.id), method: :delete,class: :post__btn %> 
         </div> 
       <% end %> 
    </div>
  </div>
</main>

<div class="like-hearts">
<%if user_signed_in? %>
    <% if Like.find_by(user_id: current_user.id, post_id: @post.id) %>
        <%= link_to  post_like_path(@post,@post.likes), class: "like-link", method: :delete, remote: true do %>
          <i class="fas fa-heart unlike-btn"></i>
        <% end %>
        <div class="count"><%= @post.likes.count %></div>
    <% else %>
        <%= link_to post_likes_path(@post,@post.likes), class: "like-link", method: :post, remote: true do %>
          <i class="far fa-heart like-btn"></i>
        <% end %>
        <div class="count"><%= @post.likes.count %></div>
    <% end %>
  <% else %>
      <i class="fas fa-grin-squint-tears unlike-btn"></i><p class="count"><%= post.likes.count %></p>
<% end %>
</div>

$("#like_heart_<%= @post.id %>").html("<%= j(render 'likes/like', locals: {post: @post}) %>");

Answer 1

流れ的には
(1)サーバー側にいいねを受けるAPIを用意する
(2)いいねをおすとAPIに文書IDとon/off情報がとぶ、なおユーザーIDはセッションで渡す
(3)APIがそれを受け処理ができるなら成功、できないなら失敗を返す
→成功失敗は文字やjsonでもいいし、httpのエラーコードでもよい
(4)成功ならいいねをonのoffを切り替える、失敗なら切り替えない