Javascriptにカスタムデータを取得しようとするとnulになる。

それぞれの投稿(preschool)に紐付いたコメント投稿をJavascriptで非同期で実装をしていますが
カスタムデータがnulになってしまいます。
エラー内容

preschoolを親要素、commentを子要素のネストにしており

data-id="<%= @preschool.id %>"

上記をビューに入れ込んでカスタムデータを取得しようとしている。

Javascript
1function comment(){
2 const submit = document.getElementById("submit");
3 submit.addEventListener("click", (e) => {
4  const preschoolId = submit.getAttribute("data-id");
5  const formData = new FormData(document.getElementById("comment-form"));
6  const XHR = new XMLHttpRequest();
7  XHR.open("POST",`/preschools/${preschoolId}/comments`, true);
8  XHR.responseType = "json";
9  XHR.send(formData);
10  XHR.onload = () => {
11    if (XHR.status != 200) {
12      alert(`Error ${XHR.status}: ${XHR.statusText}`);
13      return null;
14    }
15    const item = XHR.response.comment;
16    const list = document.getElementById("comment-list");
17    const formText = document.getElementById("comment-content");
18    const HTML = `
19    <li class="comments_list">${comment.text} 
20     <a href  "/users/${comment.user_id}">"${comment.user.nickname}さん"</a></li>
21    `;
22    list.insertAdjacentHTML("afterend", HTML);
23    formText.value = "";
24  };
25  e.preventDefault();
26 });
27
28}
29
30window.addEventListener("load", comment);
31

と記載をしたときに

preschoolId = null

となることによりパスの指定ができずエラーになってしまいます。

<div class="detail-info" data-id="<%= @preschool.id %>" >
<div class="detail-name">園名
<%= @preschool.name %></div>
<div class="detail-name">
<% @preschool.images.each do |image| %>
  <%= image_tag image, class: 'images' %>
<% end %>
</div>
<div class="detail-name">郵便番号
<%= @preschool.post_number %>
</div>
<div class="detail-name">エリア<%= @preschool.area.name%></div>
<div class="detail-name">詳細住所<%= @preschool.street_number %><%= @preschool.building %></div>
<div class="detail-name">電話番号
<%= @preschool.phone_number%>
</div>
<div class="detail-name">最寄り駅
<%= @preschool.station %></div>
<div class="detail-name">定員数
<%= @preschool.capacity %></div>
<div class="detail-name">運営種別
<%= @preschool.category.name%></div>
<div class="detail-name">開園時間
<%= l @preschool.open_hour, format: :short%>〜<%= l @preschool.close_hour ,format: :short%></div>
<div class="detail-name">園の特徴
<%= @preschool.concept%></div>
</div>
 <% if admin_signed_in? && current_admin.id == @preschool.admin_id %>
<div class="preschool__manage">
<%= link_to "編集する",  edit_preschool_path(@preschool.id), class: :preschool__btn %>
<%= link_to "削除する",  preschool_path(@preschool.id), class: :preschool__btn,method: :delete %>
</div>
<% end%>

<div class="preschool__comments">
 <% if user_signed_in? %>
<%= form_with( model: [@preschool, @comment], id: "comment-form",local: true) do |f|%>
<div class="field">
<%= f.label :text, "ママ友の口コミ",id:"comment-content" %><br />
<%= f.text_field :text %>
</div>
<div class="actions" >
<%= f.submit "送信する", class: :comment_form__btn ,id:"submit" %>
</div>
<% end %> 
<% end%>

<div class="comments_lists" , id = "comment-list" >
   <% @preschool.comments.each do |comment|%>
    <li class="comments_list">
      <%= comment.text%>
      <%= link_to "#{comment.user.nickname}さん", "/users/#{comment.user_id}",class: :comment_user %>
    </li>
    <% if user_signed_in? && current_user.id == comment.user_id %>
      <div class="comments_manage">
        <%= link_to "編集",  edit_preschool_comment_path(comment.id), class: :comment_edit__btn %>
        <%= link_to "削除", preschool_comment_path(@preschool,comment), class: :comment_destroy_btn,method: :delete %>
      </div>
    <% end%>
   <% end %>
</div>