【Ruby, JavaScript】掲示板アプリの非同期通信を可能にしたいです

Question

前提

Ruby on Rails 6.0.0で掲示板アプリを作っています。
非同期通信でコメントを投稿できるようにしたいです。
アドバイスを頂けると嬉しいです。

###実現したいこと
post.jsでtopicIdの値を取得したいです。
posts/index8行目の<div class="post" data-id = <%= @topic.id %>>からidを渡します。

・post.js　4~8行目

const posts = document.querySelectorAll(".post");
const topicId = posts.getAttribute("data-id");
const formData = new FormData(document.getElementById("form"));
const XHR = new XMLHttpRequest();
XHR.open("POST", `/topics/${topicId}/posts`, true);

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

・post.js 4, 5行目
const posts = document.querySelectorAll(".post");でclass = postを取得して、
そこからconst topicId = posts.getAttribute("data-id");でdata-idを取得しようと試みました。
しかし、topicIdの値が取得できずコンソールにエラーが表示されます。

Uncaught TypeError: post.getAttribute is not a function

該当のソースコード

・post.js

function post() {
  const submit = document.getElementById("submit");
  submit.addEventListener("click", (e) => {
    const posts = document.querySelectorAll(".post");
    const topicId = posts.getAttribute("data-id");
    const formData = new FormData(document.getElementById("form"));
    const XHR = new XMLHttpRequest();
    XHR.open("POST", `/topics/${topicId}/posts`, true);
    XHR.responseType = "json";
    XHR.send(formData);
    XHR.onload = () => {
      if (XHR.status != 200) {
        alert(`Error ${XHR.status}: ${XHR.statusText}`);
        return null;
      }
      const item = XHR.response.post;
      const list = document.getElementById("list");
      const formText = document.getElementById("comment");
      const HTML = `
        <div class="post">
          <span class="name">
            名無し
          </span>
          <span class="time">
            ${item.created_at}
          </span>
          <p class=comment>${item.comment}</p>
        </div>`;

      list.insertAdjacentHTML("beforebegin", HTML);
      formText.value = "";
    };
    e.preventDefault();
  });
 }
 window.addEventListener("load", post);

・posts/index.html.erb

<h1><%= link_to 'トップページ', root_path, class:"top-page" %></h1>

<div>
  <h3><%= @topic.title %></h3>
</div>

<% @posts.each do |post| %>
  <div class="post" data-id = <%= @topic.id %>>
    <span class="name">
      名無し
    </span>
    <span class="time">
      <%= post.created_at %>
    </span>
    <p class=comment><%= post.comment %></p>
  </div>
<% end %>

<div id="list">
</div>

<%= form_with(model: [@topic, @post], id: "form" ) do |f| %>
  <div class="form-input">
    <div>
      <%= f.text_area :comment, class: 'form-comment', id: "comment" %>
    </div>
  </div>
  <%= f.submit '投稿する', class: 'form-submit', id: "submit" %>
<% end %>

・controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
    @post = Post.new
    @topic = Topic.find(params[:topic_id])
    @posts = @topic.posts
  end

  def create
    @topic = Topic.find(params[:topic_id])
    @post = @topic.posts.new(post_params)
    if @post.save
      render json:{ post: @post }
    else
      @posts = @topic.posts
      render :index
    end
  end

  private
 
  def post_params
    params.require(:post).permit(:comment)
  end
end

・config/routes.rb

Rails.application.routes.draw do
  root to: 'topics#index'
  resources :topics, only: [:index, :new, :create] do
    resources :posts, only: [:index, :create]
  end
end

・models/post.rb

class Post < ApplicationRecord
  belongs_to :topic

  validates :comment, presence: true
end

・models/topic.rb

class Topic < ApplicationRecord
  has_many :posts

  validates :title, presence: true
end

Answer 1

posts = document.querySelectorAll(".post"); だと<% @posts.each の全postが選択されてしまうから、違うんじゃないかな
<%= f.text_area :comment, の上に
<%= hidden_field_tag :topick_id, @topick.id %>
を追加し、
const topicId = posts.getAttribute("data-id"); に替えて
const topicId = document.getElementById("topick_id").value;
としてください。

ただし、わたし JSは弱いので、JSの方は違ってるかもしれません。
要は　ID="topick_id" な要素の 値　を取得　です

Comments

[yasunsun]

回答ありがとうございます。
先ほど自己解決することができました。

Answer 2

自己解決できました。

変更後
・posts/index.html.erb
23行目

<div class="form-input", id="post" data-id = <%= @topic.id %>>

・post.js
4,5行目

const posts = document.getElementById("post");
const topicId = posts.getAttribute("data-id");

投稿画面に遷移するリンクのturbolinksはfalseにしました。
・参考サイト
https://qiita.com/avicii2314/items/df6d2a90aeff127d4fc0