非同期実装時に困った事

内容

PF作成の時にメンターさんに教えて頂いたことをいつもで引き出せるように書いておこうと思います。
非同期実装時に間違えてしまった事です。

records/show.html.erb

    :
    :
(正)
<div>
  <%= render 'public/study_comments/comment', study: @study, record: @record, study_comment: @study_comment %>
</div>

(誤)
<div class="comment-index">
  <%= render 'public/study_comments/comment', study: @study, record: @record, study_comment: @study_comment %>
</div>

recordフォルダにある"show.html.erb"で、"_comment.html.erb"を呼んでます。

study_comments/_comment.html.erb

    :
    :
(正)
<div class="comment-index">
  <%= render 'public/study_comments/index', record: record %>
</div>

(誤)
<div>
  <%= render 'public/study_comments/index', record: record %>
</div>

<div>
  <%= render 'public/study_comments/form', study: study, record: record, study_comment: study_comment %>
</div>

study_commentフォルダの"_comment.html.erb"から"_form.html.erb"と"_index.html.erb"を呼んでます。
要素の中身を書き換えるためにクラスを指定します(class="comment-index")

study_comments/_form.html.erb

<%= form_with(model: [study, record, study_comment], local: false) do |f| %>
  <div>
    <%= f.text_area :comment, class: "comment-textarea" %>
    <span><%= f.submit "送信" %></span>
  </div>
<% end %>

要素の中身を書き換えるためにクラスを指定します(class: "comment-textarea")

study_comments/_index.html.erb

  <% record.study_comments.each do |study_comment| %>
    :
    :
    :
  <% end %>

study_comments/create.js.erb

$('.comment-index').html("<%= j(render 'public/study_comments/index', record: @record ) %>");
$('.comment-textarea').val("");

JavaScript(jQuery)コード

まとめ

色々端折ってますが、何を書き残しておこうかというと、jQueryで呼び出す要素(部分テンプレート)にクラスを記載しないといけないところを、その部分テンプレートを呼び出している部分テンプレートにクラスを記載してました。
ターミナルにroutingErrorと表示され、コメントが連続送信できないという状況に陥いりました。
見つけるのに苦労した為、気を付けようと思いました。