お気に入り機能の動作がうまくいかない

Question

前提・実現したいこと

railsで掲示板のお気に入り機能(ajax)を実装しています。

押したお気に入りボタンと掲示板が対応していないです。再読込すると、正しく動作します。
ですから、ajaxのコードに問題があると思います。

画像を撮影しました。

タイトル0ではうまく動作します
https://gyazo.com/6c59352a587feed7f96bd204e2b38ce4

タイトル1の場合はうまくいきません
https://gyazo.com/76da50efc5ebc1b0f179028f18110989

掲示板＝board, お気に入り＝bookmarkとしています

ご教授のほどよろしくお願いいたします。

該当のソースコード

boards_controller.rb

class BoardsController < ApplicationController
  before_action :set_board, only: %i[edit update destroy]
  def index
    @boards = Board.all.includes(:user)
  end

  def new
    @board = Board.new
  end

  def create
    @board = current_user.boards.new(board_params)

    if @board.save
      redirect_to boards_url, success: '掲示板を作成しました'
    else
      flash.now[:danger] = '掲示板を作成できませんでした'
      render :new
    end
  end

  def edit; end

  def update
    if @board.update(board_params)
      redirect_to board_url(@board), success: '掲示板を更新しました'
    else
      flash.now[:danger] = '掲示板を更新できませんでした'
      render :edit
    end
  end

  def show
    @board = Board.find(params[:id])
    @comment = Comment.new
    @comments = @board.comments.includes(:user).order(created_at: :desc)
  end

  def destroy
    @board.destroy!
    redirect_to boards_url, warning: '掲示板を削除しました'
  end

  def bookmarks
    @bookmark_boards = current_user.bookmark_boards.includes(:user)
  end

  private

  def board_params
    params.require(:board).permit(:title, :body, :image, :image_cache)
  end

  def set_board
    @board = current_user.boards.find(params[:id])
  end
end

bookmarks_controller.rb

class BookmarksController < ApplicationController
  before_action :set_board, only: %i[create destroy]
  def create
    @bookmark = current_user.bookmarks.new(board_id: params[:board_id])
    @bookmark.save
  end

  def destroy
    @bookmark = current_user.bookmarks.find_by(board_id: params[:board_id])
    @bookmark.destroy!
  end

  private

  def set_board
    @board = Board.find(params[:board_id])
  end
end

user.rb

class User < ApplicationRecord
  authenticates_with_sorcery!

  has_many :boards, dependent: :destroy
  has_many :comments, dependent: :destroy
  has_many :bookmarks, dependent: :destroy
  has_many :bookmark_boards, through: :bookmarks, source: :board

  validates :last_name, presence: true, length: { maximum: 255 }
  validates :first_name, presence: true, length: { maximum: 255 }
  validates :password, length: { minimum: 3 }, if: -> { new_record? || changes[:crypted_password] }
  validates :password, confirmation: true, if: -> { new_record? || changes[:crypted_password] }
  validates :password_confirmation, presence: true, if: -> { new_record? || changes[:crypted_password] }

  validates :email, presence: true, uniqueness: true

  def own?(object)
    id == object.user_id
  end
end

board.rb

class Board < ApplicationRecord
  mount_uploader :image, ImagesUploader

  belongs_to :user
  has_many :comments, dependent: :destroy
  has_many :bookmarks, dependent: :destroy

  validates :title, presence: true, length: { maximum: 255 }
  validates :body, presence: true, length: { maximum: 65_535 }

  def bookmark_by?(user)
    bookmarks.where(user_id: user.id).exists?
  end
end

bookmark.rb

class Bookmark < ApplicationRecord
  belongs_to :user
  belongs_to :board

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

こちらはboards/index.html.erbの部分テンプレートです

boards/_board.html.erb

<div class="col-sm-12 col-lg-4 mb-3">
  <div id="board-id-1">             
    <div class="card">
      <%= image_tag board.image.url, size: '300x200' %>
        <div class="card-body">
          <h4 class="card-title">
            <%= link_to board.title, board_path(board) %>
          </h4>
          <% if current_user.own?(board) %>
            <%= render 'crud_menus', board: board %>
          <% else %>
            <div id = "bookmark_btn_<% board.id %>" style='display: inline; float: right;'>
              <%= render 'bookmark_area', board: board %>
            </div>
          <% end %>
          <ul class="d-flex flex-column list-unstyled">
            <li class="p-0"><i class="fas fa-user"></i>  <%= board.user.decorate.full_name %></li>
            <li class="p-0"><i class="far fa-calendar-alt"></i>  <%= l board.created_at %></li>
          </ul>
          <p class="card-text"><%= board.body %></p>
        </div>
    </div>
  </div>
</div>

こちらは_board.html.erbの部分テンプレートです

boards/_bookmark_area.html.erb

<% if board.bookmark_by?(current_user) %>
  <%= render 'bookmarks/unbookmark', board: board %>
<% else %>
  <%= render 'bookmarks/bookmark', board: board %>
<% end %>

bookmarks/_bookmark.html.erb

<%= link_to icon('far', 'star'), board_bookmarks_path(board.id), remote: true, method: :post, id: :"js-bookmark-button-for-board-#{board.id}" %>

bookmarks/unbookmark.html.erb

<%= link_to icon('fas', 'star'), board_bookmarks_path(board.id), remote: true, method: :delete, id: :"js-bookmark-button-for-board-#{board.id}" %>

bookmarks/create.js.erb

$('#bookmark_btn_<% @board.id %>').html("<%= j(render 'boards/bookmark_area', { board: @board })%>");

bookmarks/destroy.js.erb

$('#bookmark_btn_<% @board.id %>').html("<%= j(render 'boards/bookmark_area', { board: @board })%>");

Answer 1

create.js.erbとdestroy.js.erbファイルのidの部分を
'#bookmark_btn_<% @board.id %>'から'#js-bookmark-button-for-board-<%= @board.id %>'へと変更することで解決しました。
つまり、_board.html.erbにidを与えるのではなく、_bookmark.html.erbと_unbookmark.html.erbのidを直接、受け取ってboards/bookmark_area.html.erbにレンダリングすることでajaxの処理がうまくいきました。