⭐️JavascriptのAmbiguous matchエラー

コメント一覧の幅が広くなってしまっていたエラーについて

Image from Gyazo

上記を検証してみた結果、
Ambiguous match, found 2 elements matching visible css "#js-table-comment"
☝️要素(idやclassなど)が重複しているため起きたエラーが発生し、 見本の成果物と自身のHTMLを検証ツールを使って調査してみたら、

・見本

Image from Gyazo

・自身のHTML

Image from Gyazo

このように<body></body>の中に

<!-- コメントエリア -->
<tr id='comment-<%= comment.id %>'>
  <td style="width: 60px">
    <%= image_tag 'sample.jpg', class: 'rounded-circle', size: '50x50' %>
  </td>
  <td>
    <h3 class="small"><%= comment.user.decorate.full_name %></h3>
    <div id="js-comment-<%= comment.id %>">
      <%= simple_format(comment.body) %>
    </div>
    <div id='js-textarea-comment-box-<%= comment.id %>' style="display: none;">
      <textarea id='js-textarea-comment-<%= comment.id %>' class="form-control mb-1"><%= comment.body %></textarea>
      <button class="btn btn-light js-button-edit-comment-cancel" data-comment-id="<%= comment.id %>">キャンセル</button>
      <button class="btn btn-success js-button-comment-update" data-comment-id="<%= comment.id %>">更新</button>
    </div>
  </td>
 
  <% if current_user.own?(comment) %>
    <td class="action">
      <ul class="list-inline justify-content-center" style="float: right;">
        <li class="list-inline-item">
          <a href="#" class='js-edit-comment-button' data-comment-id="<%= comment.id %>">
            <%= icon 'fa', 'pen' %>
          </a>
        </li>
        <li class="list-inline-item">
          <a href="#" class='js-delete-comment-button' data-comment-id="<%= comment.id %>">
            <%= icon 'fas', 'trash' %>
          </a>
        </li>
      </ul>
    </td>
  <% end %>
</tr>

上記(コメント)が 見本では2つ格納されているのに対して、自身のコードでは1つしか格納されていない事が判明。

色々と試してみたが、結果おそらく

<% @comments.each do |comment| %>
  <%= render partial: 'comments/comment', locals: { comment: comment } %>
<% end %>

このeach文を使っていたことで、コメントが作成されコメント一覧のCSSが適応になるときに、１つずつ

<div class="row">
  <div class="col-lg-8 offset-lg-2">
    <table id="js-table-comment" class="table">
      <%= render @comments %>
    </table>
  </div>
</div>

が作成されてコメントのCSSがうまく適応されなかったのかと思われます！(色々試しすぎたので、憶測ですが、、、😀)

☀️解決法

・each文を削除し、

<!-- コメントエリア -->
  <%= render 'comments/comments', locals: { comments: @comments } %>

上記のレンダリングが上手くいくように他ファイルの記述を変更。

🟢このエラーに2日くらいかかったので、巻いて行きます！！🔥💪