非同期化したいいね欄がずれてしまいます。

Question

前提・実現したいこと

いいね機能の非同期化をしたいと思っています。

いいね機能の非同期通信を実装したときに、いいね前といいね後で、テーブルのtdがずれてしまい、困っております。

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

下記スクリーンショットの通りです。

いいね前

いいね後

該当のソースコード

# frozen_string_literal: true

class ArticlesController < ApplicationController
  def new
    @article = Article.new
  end

  def create
    @article = Article.new(article_params)
    @article.user_id = current_user.id
    if @article.save
      redirect_to articles_path
    else
      render :new
    end
  end

  def index
    @articles_new = Article.all.order(created_at: :desc).page(params[:page])
    # tagを押したとき、同じタグが付いているもののみを表示
    @articles_new = Article.tagged_with(params[:tag_name].to_s).page(params[:page]) if params[:tag_name]
  end

  def index_favorite
    @articles_favorite = Kaminari.paginate_array(Article.includes(:favorites).sort { |a, b| b.favorites.count <=> a.favorites.count }).page(params[:page])
    @articles_favorite = Kaminari.paginate_array(Article.tagged_with(params[:tag_name].to_s).includes(:favorites).sort { |a, b| b.favorites.count <=> a.favorites.count }).page(params[:page]) if params[:tag_name]
  end

  def index_comment
    @articles_comment = Kaminari.paginate_array(Article.includes(:comments).sort { |a, b| b.comments.count <=> a.comments.count }).page(params[:page])
    @articles_comment = Kaminari.paginate_array(Article.tagged_with(params[:tag_name].to_s).includes(:comments).sort { |a, b| b.comments.count <=> a.comments.count }).page(params[:page]) if params[:tag_name]
  end

  def show
    @article = Article.find(params[:id])
    @comment_new = Comment.new
  end

  def edit
    @article = Article.find(params[:id])
  end

  def update
    @article = Article.find(params[:id])
    @article.update(article_params)
    redirect_to article_path(@article)
  end

  def destroy
    @article = Article.find(params[:id])
    @article.destroy
    redirect_to articles_path
  end

  private

  def article_params
    params.require(:article).permit(:title, :introduction, :url, :tag_list)
  end
end

<div class="article_content">
  <div class="article-submit">
    <% if user_signed_in? %>
      <%= link_to "記事を投稿する", new_article_path, class: 'btn btn-primary' %>
    <% end %>
  </div>

  <div class="article-sort">
    <%= link_to "新着順", articles_path, class: 'btn btn-info' %>
    <%= link_to "いいね順", articles_favorite_sort_path, class: 'btn btn-info' %>
    <%= link_to "コメント数順", articles_comment_sort_path, class: 'btn btn-info' %>
  </div>

  <table border="1">
    <thead>
      <tr>
        <th>ユーザー名</th>
        <th>記事タイトル</th>
        <th>記事紹介文</th>
        <th>タグ</th>
        <th>コメント数</th>
        <% if user_signed_in? %>
          <th>いいね</th>
        <% end %>
        <th>いいね数</th>
        <th>記事の詳細ページ</th>
        <th>記事作成日時</th>
      </tr>
    </thead>
    <!--each文のリファクタリング-->
    <%= render partial: 'article', collection: @articles_new, as: :article %>
  </table>

  <!--kaminariのページング-->
  <div class="paging">
    <%= paginate @articles_new %>
  </div>
</div>

<!--記事のtd要素の部分テンプレート-->
<tbody>
  <tr id='article_<%= article.id %>'>
    <td><%= article.user.name %></td>
    <td><%= article.title %></td>
    <td><%= article.introduction %></td>
    <!--acts-as-taggable-onの部分テンプレート-->
    <td><%= render 'favorites/tag_list', tag_list: article.tag_list %></td>
    <td><%= article.comments.count %></td>
  　<!--ユーザーとしてサインしている場合にいいね機能を利用可能-->
    <% if user_signed_in? %>
    <td>
      <% if article.favorited_by?(current_user) %>
        <%= link_to article_favorites_path(article), method: :delete, remote: true do %>♥<% end %>
      <% else %>
        <%= link_to article_favorites_path(article), method: :post, remote: true do %>♡<% end %>
      <% end %>
    </td>
    <% end %>
    <td><%= article.favorites.count %></td>
    <td><%= link_to "詳細", article_path(article) %></td>
    <!--日本時間に変更-->
    <td><%= article.created_at.strftime('%Y/%m/%d %H:%M') %></td>
  </tr>
</tbody>

document.getElementById("article_<%= @article.id %>").innerHTML = '<%= j(render @article) %>'

試したこと

コードのとおりです。

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

必要な情報がありましたら、お聞きください。

Answer 1

js部分の<%= j(render @article) %>で作成されるhtmlが<td>から始まっていないという事はないでしょうか？

もし「記事のtd要素の部分テンプレート」で記載されている部分がまるまる生成されているようならinnerHTMLで書き換えた時

<tbody>
	<tr id="article_xx">
		<tbody>
			<tr id="article_xx">
				<td>.....</td>
				<td>.....</td>
				<td>.....</td>
			</tr>
		</tbody>
	</tr>
</tbody>

のようにネスト状態になってしまいます。