いいね機能の実装ができない

Question

前提・実現したいこと

投稿した写真にいいねを付けられるようにしたいと思い
下記の記事を参考にさせていただき、実装を試した所
うまくいかずエラーが出てしまいます。
https://qiita.com/YuitoSato/items/94913d6a349a530b2ea2
https://qiita.com/kaito_program/items/c486354196e67b5d11e0

まず、どのようないいね機能を付けたいかというと
１．ログインユーザーがいいねを付けられる。
２．いいねができるのは１回だけ。
３．いいねはハートのアイコンになっており、最初は黒いハートだが、押すと非同期通信にて赤いハートに変わる。
４．いいねをされた数を一緒に表示させる。
以上になります。

プログラミング初心者のため、とりあえず参考記事をコピペなどして試してから理解に努めようとしております。そのため、簡単なミスもわからずに見落としがちですが、どなたかご教授いただけると助かります。

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

条件によってエラーの内容が異なります。

１．トップページから投稿詳細ページへ遷移できない。
これは、投稿者は詳細ページへ遷移できるが、投稿者以外のログインユーザーが詳細ページへ遷移しようとすると下記のエラーが発生するものです。
追記：解決済み

**NameError in Posts#show**
undefined local variable or method `like' for #<#<Class:0x00007fdf2225dfb0>:0x00007fdf2225c458>

2.投稿者本人が自分の投稿にもいいねが押せるはずだが、ログアウト状態者ようのなにも反応しない黒いハートのまま
追記：解決済み

３．いいねがされた数を表示するためのコードを書くとエラーが出てしまう。
追記：解決済み

４．ページをリロードするといいねが反映され、データベース上にも保存されるが、非同期通信ができない。

VM210:1 Uncaught ReferenceError: $ is not defined
    at <anonymous>:1:1
    at processResponse (rails-ujs.js:283)
    at rails-ujs.js:196
    at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
(anonymous) @ VM210:1
processResponse @ rails-ujs.js:283
(anonymous) @ rails-ujs.js:196
xhr.onreadystatechange @ rails-ujs.js:264
XMLHttpRequest.send (async)
./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.ajax @ rails-ujs.js:216
./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.handleRemote @ rails-ujs.js:652
(anonymous) @ rails-ujs.js:172
3index.js:13 Uncaught TypeError: Cannot set property 'src' of null
    at slideshow_timer (index.js:13)

該当のソースコード

 resources :posts do
    resources :comments, only: :create
    resources :likes, only: [:create, :destroy]
  end

:commentsは別機能実装のため、ネストしてあるので無視してください。

#いいね機能のコントローラー
class LikesController < ApplicationController
  before_action :set_post

  def create
    @like = Like.create(user_id: current_user.id, post_id: params[:post_id])
    @likes = Like.where(post_id: params[:post_id])
    @like.save
    @post = @like.post
  end

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

  private

  def set_post
    @post = Post.find(params[:post_id])
  end

end

#念の為記載、投稿機能のコントローラー（showアクション部分)
 def show
    @comment = Comment.new
    @comments = @post.comments.includes(:user)
  end

#いいね機能側
class Like < ApplicationRecord
  belongs_to :post, counter_cache: :likes_count
  belongs_to :user

  validates :post_id, uniqueness: { scope: :user_id }
end

#投稿機能側
class Post < ApplicationRecord
　belongs_to :user
 　has_many :likes, dependent: :destroy

  def like_user(user_id)
    likes.find_by(user_id: user_id)
   end

end

#部分テンプレート　views/likes/_like.html.erb

<% if user_signed_in? %>

  <% unless post.like_user(current_user.id).blank? %>
    <%= link_to post_like_path(post_id: post.id ,id: post.likes[0].id), method: :delete, remote: true do %>
      <div class="vertical_like">
        <%= image_tag("icon_red_heart.png") %>
        <span class="red-text">
          <%= post.likes_count %>
        </span>
      </div>
    <% end %>
  <% else %>
    <%= link_to post_likes_path(post.id), method: :post, remote: true do %>
      <div class="vertical_like">
        <%= image_tag("icon_heart.png") %>
        <span class="grey-text text-darken-2">
          <%= post.likes_count %>
        </span>
      </div>
    <% end %>
  <% end %>

<% else %>

  <% if post.likes_count > 0 %>
    <div class="vertical_like">
      <i class="material-icons red-text">favorite</i>
      <span class="red-text">
        <%= post.likes_count %>
      </span>
    </div>
  <% else %>
    <div class="vertical_like">
      <i class="material-icons grey-text text-darken-2">favorite_border</i>
      <span class="grey-text text-darken-2">
        <%= post.likes_count %>
      </span>
    </div>
  <% end %>

<% end %>

likeモデルにてcounter_cacheの記述を書いているので、post.like_countとするだけでその投稿に結びつくlike数が表示されます。と参考記事にありましたが、<%= post.like_count %>を書くとエラーが出てしまいます。
ちなみにlike_countのカラムはpostテーブルに追加済みで、型はitegerで設定しています。
追記：上記エラー解決済み

#views/likes/create.js.erb
$('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");

#views/likes/destroy.js.erb
$('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");

追加：呼び出したい部分で↓

  <div id="likes_buttons_<%= @post.id %>">
    <%= render partial: 'likes/like', locals: { post: @post, likes: @likes}, id:"likes_buttons_" %>
  </div>

追記：likesコントローラー、部分テンプレート、JavaScriptはサイト内の質問を参考に編集されています。

試したこと

おそらく条件式を記事のままコピペしてしまったので、自分の実装したいいいね機能と異なる条件式になっていることはなんとなく理解できている。
なので条件の部分テンプレートのところの<% if user_signed_in? %>を<% if user_signed_in? && current_user.id != @post.user_id %>にしてみたりと試しました。
結果は遷移はできるようになったので、エラーの１の部分は解消されたかと思います。しかし、いいねボタンのアイコンが押せないエラーは継続しています。

以上になります。
他の情報が必要な場合は教えていただけると助かります。
宜しくおねがいします！

追記：上記エラーの１，２，３はサイト内の"https://teratail.com/questions/245199"様の質問を参考に（正確には質問者様の参考サイト）解決いたしました。
ただ、非同期通信にはならず、新たに４のエラーがでています。こちらのエラーはサイト内の質問を参考にして色々試しましたが、現在も解決できていません。
アドバイスをいただける方がいましたらお願いします

Comments

[m.ts10806]

過去質問によく出るのですけど、それらは何一つ役に立たなかったのでしょうか。
https://teratail.com/search?q=%E3%81%84%E3%81%84%E3%81%AD+tag%3ARuby+on+Rails

[max3252]

ご指摘ありがとうございます。
自分なりにいくつか参考にさせていただいて試してはいるのですが、なかなか改善されません。
見る数が少ないかも知れないので、もう少し探して見ます！

[m.ts10806]

あ、いえ、サイト内検索で参照した旨が書かれてないので、そもそも見ていないのかと思って。

[max3252]

一応サイト内で関連質問を見て回っているのですが、なかなか見つからないです...
現在も捜索はしています！

[m.ts10806]

めぼしいものがあったら質問に追記しておくと、回答する人もアドバイスしやすくなるかと思います。

[max3252]

かしこまりました！
アドバイスありがとうございます！

Answer 1

こちらかなり時間が経ちましたが、解決致しました！
application.html.erbのhead内にjQueryを読み込む為のコードが抜けてました。