非同期で実装したいいねをクリックするとボタンが増えてしまう。

Question

###前提・実現したいこと
非同期でいいねボタンをクリックした際にボタンが増えてしまう問題を解決したい

###ここに質問の内容を詳しく書いてください。
非同期でのいいね機能を実装したのですが、なぜかボタンをクリックすると下にクリックする前の状態のいいねが作られてしまいます。ちなみにlikeファイルの-if user_signed_inを消すとなぜかこの問題は解消されますが、この記述は残したいので、このコードを残したままこの問題を解決する方法を教えていただきたいです。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

コード　

エラーメッセージ： エラーは特に出ていません
```　
### 該当のソースコード
```like
.like-link{:id => "like-link-#{story.id}"}
- if user_signed_in?
  - if current_user.likes.find_by(recommended_id: story.id)
    = link_to unlike_path(story.id), method: :delete, remote: true do
      .iine__button
        ❤️#{story.likes.count}
  - else
    = link_to like_path(story.id), method: :post, remote: true do
      .iine__button
        ♡️#{story.likes.count}

```ここに言語名を入力
```js
$("<%= @id_name %>").html('<%= escape_javascript(render("likes/like", story: @recommended  )) %>');

class LikesController < ApplicationController
    before_action :set_variables
  
    def like
      like = current_user.likes.new(recommended_id: @recommended.id)
      like.save
    end
  
    def unlike
      like = current_user.likes.find_by(recommended_id: @recommended.id)
      like.destroy
    end
  
    private
  
    def set_variables
      @recommended = Recommended.find(params[:recommended_id])
      @id_name = "#like-link-#{@recommended.id}"
    end
  
  end

試したこと

非同期を使わなければリロードしなければいけないが、特にエラーは出ません。

ここに問題に対して試したことを記載してください。
多分ボタンをクリックした時に新しいボタンがCreateされていると思うが、以前のボタンが消えずにそのまま残ってしまっている。

補足情報（FW/ツールのバージョンなど）![```ここに言語を入力````````````ここに言語を入力

ここに言語を入力

ruby 2.5.1
ここに言語を入力

ここに言語を入力

rails 5.2.1
コード

Answer 1

- if user_signed_in?

とその下の行達をインデントして下さい。

いまは

- if user_signed_in?

が

like-link{:id => "like-link-#{story.id}"}

と同じインデントであるため、ボタンは

.like-link{:id => "like-link-#{story.id}"}

の下にありません。
ですので、likeボタンを押した時、

.like-link{:id => "like-link-#{story.id}"}

に一つ追加され、それまでのゼロカウントのボタンが残るのです。

- if user_signed_in? 
を削除すると、ボタンが
.like-link{:id => "like-link-#{story.id}"}

のしたになるので、js で置き換えられるようになる、というわけでした。

Comments

[fakstop]

ありがとうございます！
無事解決できました！
感謝します！