[rails][非同期] いいね機能 いいね数の表示が正常にされない

Question

前提・実現したいこと

いいねの数を正確に表示させたいです。
Railsでいいね機能をAjaxを用いて非同期で行えるように実装しています。

ユーザーは一つの投稿に対して一つのいいねができます。
まだいいねを押していない投稿に♡を押すと、いいねができ、
すでにいいねをしている投稿に♡を押すと、いいねを削除できます。（twitterの仕様と同じです）

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

いいねボタンの横にいいね数を表示しているのですが、
いいねを押した時に、正しいいいね数の右横にいいねを押す前の数字が残ったままになり、リロードすると正しい表示になります。
（例）
いいね数０の投稿にいいねを押すと、１０と表示される　　　　　リロードすると１となる
いいね数１の投稿にいいねを押すと、２１と表示される　　　　　リロードすると２となる
いいね数２の投稿にいいねを押すと、３２と表示される　　　　　リロードすると３となる

特にエラー文は出ておらず、ターミナルを見てみても問題ないように見えます。

ターミナルの表示です
前半がいいねボタンを押した時で、後半がリロードした時の動きです

[前半]

Started POST "/tweets/30/likes" for ::1 at 2020-11-15 22:35:42 +0900
Processing by LikesController#create as JS
  Parameters: {"tweet_id"=>"30"}
  User Load (0.3ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
  Tweet Load (0.4ms)  SELECT `tweets`.* FROM `tweets` WHERE `tweets`.`id` = 30 LIMIT 1
  ↳ app/controllers/likes_controller.rb:4:in `create'
   (0.2ms)  BEGIN
  ↳ app/controllers/likes_controller.rb:6:in `create'
  Tweet Load (0.3ms)  SELECT `tweets`.* FROM `tweets` WHERE `tweets`.`id` = 30 LIMIT 1
  ↳ app/controllers/likes_controller.rb:6:in `create'
  Like Exists? (0.3ms)  SELECT 1 AS one FROM `likes` WHERE `likes`.`tweet_id` = 30 AND `likes`.`user_id` = 1 LIMIT 1
  ↳ app/controllers/likes_controller.rb:6:in `create'
  Like Create (1.7ms)  INSERT INTO `likes` (`tweet_id`, `user_id`, `created_at`, `updated_at`) VALUES (30, 1, '2020-11-15 13:35:43.112297', '2020-11-15 13:35:43.112297')
  ↳ app/controllers/likes_controller.rb:6:in `create'
   (1.8ms)  COMMIT
  ↳ app/controllers/likes_controller.rb:6:in `create'
  Rendering likes/create.js.erb
  Like Exists? (0.3ms)  SELECT 1 AS one FROM `likes` WHERE `likes`.`user_id` = 1 AND `likes`.`tweet_id` = 30 LIMIT 1
  ↳ app/models/user.rb:29:in `already_liked?'
   (0.3ms)  SELECT COUNT(*) FROM `likes` WHERE `likes`.`tweet_id` = 30
  ↳ app/views/likes/_like.html.erb:4
  Rendered likes/_like.html.erb (Duration: 2.7ms | Allocations: 1707)
  Rendered likes/create.js.erb (Duration: 3.0ms | Allocations: 1812)
Completed 200 OK in 125ms (Views: 2.8ms | ActiveRecord: 5.6ms | Allocations: 9518)

[後半]

Started GET "/tweets/30" for ::1 at 2020-11-15 22:35:50 +0900
Processing by TweetsController#show as HTML
  Parameters: {"id"=>"30"}
  Tweet Load (0.5ms)  SELECT `tweets`.* FROM `tweets` WHERE `tweets`.`id` = 30 LIMIT 1
  ↳ app/controllers/tweets_controller.rb:58:in `set_tweet'
  Rendering tweets/show.html.erb within layouts/application
  User Load (0.4ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ app/views/shared/_header.html.erb:12
  Rendered shared/_header.html.erb (Duration: 4.6ms | Allocations: 1812)
  User Load (0.4ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 3 LIMIT 1
  ↳ app/views/tweets/show.html.erb:15
  Like Exists? (0.5ms)  SELECT 1 AS one FROM `likes` WHERE `likes`.`user_id` = 1 AND `likes`.`tweet_id` = 30 LIMIT 1
  ↳ app/models/user.rb:29:in `already_liked?'
   (0.6ms)  SELECT COUNT(*) FROM `likes` WHERE `likes`.`tweet_id` = 30
  ↳ app/views/likes/_like.html.erb:4
  Rendered likes/_like.html.erb (Duration: 5.9ms | Allocations: 1788)
  Comment Load (0.5ms)  SELECT `comments`.* FROM `comments` WHERE `comments`.`tweet_id` = 30
  ↳ app/views/tweets/show.html.erb:43
  Rendered tweets/show.html.erb within layouts/application (Duration: 17.7ms | Allocations: 5637)
[Webpacker] Everything's up-to-date. Nothing to do
Completed 200 OK in 36ms (Views: 29.1ms | ActiveRecord: 2.9ms | Allocations: 15057)

該当のソースコード

tweet_likes   DELETE /tweets/:tweet_id/likes(.:format)  likes#destroy                                                      
tweet_likes   POST   /tweets/:tweet_id/likes(.:format)  likes#create                                                    
                             
                                 

app/controllers/likes_controller.rb


class LikesController < ApplicationController

  def create
    @tweet = Tweet.find(params[:tweet_id])
    @like = current_user.likes.build(tweet_id: params[:tweet_id], user_id: current_user.id)
    @like.save
  end

  def destroy
    @tweet = Tweet.find(params[:tweet_id])
    @like = Like.find_by(tweet_id: params[:tweet_id], user_id: current_user.id)
    @like.destroy
  end
end

app/views/likes/_like_html.erb

<% if user_signed_in? %>
  <% if current_user.already_liked?(tweet) %>
    <%= link_to '♡', tweet_likes_path(tweet.id), method: :delete, class:"list-inline-item ml-5", remote: true %>
    <li class="list-inline-item"><%= tweet.likes.count %></li>
  <% else %>
    <%= link_to '♡', tweet_likes_path(tweet.id), method: :post, class:"list-inline-item ml-5", remote: true %>
    <li class="list-inline-item"><%= tweet.likes.count %></li>
  <% end %>
<% else %>
  ♡<li class="list-inline-item"><%= tweet.likes.count %></li>
<% end %>

app/views/likes/create.js.erb

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

app/views/likes/destroy.js.erb

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

app/views/tweets/show.html.erb

<% if user_signed_in? && current_user.id == @tweet.user_id %>
          <div class="text-right">
            <%= link_to '編集', edit_tweet_path, class: "card-link" %>
            <%= link_to '削除', tweet_path, method: :delete, class: "card-link" %>
          </div>
        <% end %>
          <h3 class="card-title mb-4"><%= @tweet.title %></h3>
          <p class="card-text"><%= @tweet.text %></p>
          <ul class="list-inline">
          <%= link_to "/users/#{@tweet.user.id}" do %>
            <li class="list-inline-item"><%= @tweet.user.nickname %></li>
          <% end %>
            <li class="list-inline-item ml-2"><%= @tweet.user.age.name %></li>
            <li class="list-inline-item"><%= @tweet.user.gender.name %></li>
            <li class="list-inline-item"><%= @tweet.user.occupation.name %></li>
          <%= link_to "#" do %>
            <li class="list-inline-item ml-4 mr-5">悩み：<%= @tweet.category.name %></li>  <%# 後ほどカテゴリー検索機能 %>
          <% end %>

          <li id="likes_buttons_<%= @tweet.id %>", class="list-inline-item" >
            <%= render partial: 'likes/like', locals: {tweet: @tweet} %>
          </li>

          </ul> 

#以下省略

config/routes.rb

Rails.application.routes.draw do
  devise_for :users
  devise_scope :user do
    get '/users/sign_out' => 'devise/sessions#destroy'
  end
  
  root to: "tweets#index"  
  resources :tweets, except: :index do
    resources :comments, only: [:create, :destroy]
    collection do
      get 'search'
    end
    resource :likes, only: [:create, :destroy]
  end
  resources :users, only: :show 
end

app/JavaScript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

試したこと

エラー文がなくどこを確かめてみれば良いかわかりませんでした。
いいね数の表示がおかしいということで、app/views/likes/_like_html.erbの
いいね数を表示する記述などを確かめてみましたが、特に問題があるようには見えませんでした。

リロードしたら正しい表示になるので、非同期を実装する過程で問題が起こっていると思うのですが
私の力不足で解決にいたりませんでした。

同じような質問がないか調べてみましたが見つからず、質問させていただきました。

初めての質問で至らないところがあると思いますが、何卒よろしくお願いいたします。

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

Ruby 2.6.5

Answer 1

<li id="likes_buttons_<%= @tweet.id %>", class="list-inline-item" >タグの中に
<li class="list-inline-item">タグが入ってるせいで
ブラウザが勝手に</li>を補完しているかと思います。

Comments

[r_tech]

おっしゃる通りでした。
重複している<li>タグとclass="list-inline-item"と取り除くことで
正しい表示ができるようになりました。

大変勉強になりました。
ありがとうございました！