エラーの概要

参考記事
上にある記事を参考にしてrailsで以下のようなアイコンを押すといいねできる機能を実装しました。アイコンにはfontawsomeを使用しています。

しかし、アイコンを押すと、以下の画像のようにアイコンが増え、

さらにブラウザをリロードすると、３つに増えてしまいます。

恐らくビューファイル側でのエラーではあると思いますが、原因がわからなかったので質問させていただきます。

該当のソースコード

こちらはいいね機能の部分テンプレートです↓

Ruby
1<% if user_signed_in? %>
2  <% if current_user.liked_by?(@article.id) %>
3      <td>
4        <%= link_to destroy_like_path(@article), method: :DELETE, remote: true do %>
5          <i class="fa fa-heart unlike-btn"></i>
6        <% end %>
7        <%= @article.likes.count %>
8      </td>
9  <% else %>
10      <td>
11        <%= link_to create_like_path(@article), method: :POST, remote: true do %>
12          <i class="fa fa-heart like-btn">
13        <% end %>
14        <%= @article.likes.count %>
15      </td>
16  <% end %>
17<% else %>
18  <p><span>いいね数: </span><%= @article.likes.count %></p>
19<% end %>

こちらは該当のビューファイルの全体像↓

Ruby
1<%= render "shared/header" %>
2<% if current_user.id == @article.user.id %>
3  <%= link_to "編集", edit_article_path(@article.id), method: :get, class: "article-red-btn" %>
4  <%= link_to "削除", article_path(@article.id), method: :delete, class:"article-destroy" %>
5<% end %>
6<%= @article.title %>
7<%= @article.content %>
8<%= @article.tag_list %>
9<div id="likes_buttons_<%= @article.id %>">
10  <%= render partial: 'likes/like', locals: { article: @article} %>
11</div>
12
13<div>
14    <h4>コメント</h4>
15    <div id="comments_area"><!-- #① -->
16      <!-- 投稿されたコメント一覧をブログの詳細ページに表示するためのrender -->
17      <%= render partial: 'comments/index', locals: { comments: @comments } %>
18    </div>  
19    <% if user_signed_in? %>
20      <!-- コメント入力欄をブログの詳細ページに表示するためのrender -->
21      <%= render partial: 'comments/form', locals: { comment: @comment, article: @article } %>
22    <% end %>
23  </div>

いいね機能を非同期で行うためのjQueryの記述(views/likes/create.js.erb)↓

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

非同期でいいねを削除するためのjQueryの記述(views/likes/destroy.js.erb)↓

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

いいね機能部分のCSSの記述(likes.scss)

Css
1.like-link {
2  text-decoration: none;
3}
4
5.like-link:hover {
6  background-color: #fff;
7}
8
9.like-btn {
10  font-size: 15px;
11  color: #808080;
12}
13 
14.unlike-btn {
15  font-size: 15px;
16  color: #e54747;
17}
18