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

前提

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