jsでrailsのform_withメソッドのidを取得したい・

Question

現状

　PAYJPを用いて、購入機能を実装したいと思っています。クレジットカードの情報をトークン化する為に、ますはJavaScriptでhtml.erbの要素を取得したいので以下の記述を行いました。
JavaScriptは学習して２日しか経っていません。
取得したい要素はform_withメソッドのidのcarge_formです。

const pay = () => {
    const charge_form = document.getElementById("charge-form");
    charge_form.addEventListener("click", (e) => {
        e.preventDefault();
        console.log("フォーム送信時にイベント発火");
    });
};
window.addEventListener("load", pay);

<%= form_with(model: @order_form, url: item_orders_path, method: :post, local: true) do |form| %>
<%= render 'shared/error_messages', model: @order_form %>
<%= render "shared/second-header"%>

<div class='transaction-contents'>
  <div class='transaction-main'>
    <h1 class='transaction-title-text'>
      購入内容の確認
    </h1>
    <% @items.each do |item| %>
    <div class='buy-item-info'>
      <%= image_tag item.image, class: 'buy-item-img' %>
      <div class='buy-item-right-content'>
        <h2 class='buy-item-text'>
          <%= item.title %>
        </h2>
        <div class='buy-item-price'>
          <p class='item-price-text'>¥<%= item.item_price %></p>
          <p class='item-price-sub-text'><%= item.shipping_fee.name %></p>
        </div>
      </div>
    </div>
    
    <div class='item-payment'>
      <h1 class='item-payment-title'>
        支払金額
      </h1>
      <p class='item-payment-price'>
        ¥<%= item.item_price %>
      </p>
    </div>
    <%end%>

    <%= form_with(mode: @order_form, local: true, url: item_orders_path, id: 'charge-form', class: 'transaction-form-wrap') do |f| %>
    <%# カード情報の入力 %>
    <div class='credit-card-form'>
      <h1 class='info-input-haedline'>
        クレジットカード情報入力
      </h1>
      <div class="form-group">
        <div class='form-text-wrap'>
          <label class="form-text">カード情報</label>
          <span class="indispensable">必須</span>
        </div>
        <%= f.text_field :number, class:"input-default", id:"card-number", placeholder:"カード番号(半角英数字)", maxlength:"16" %>
        <div class='available-card'>
          <%= image_tag 'card-visa.gif', class: 'card-logo'%>
          <%= image_tag 'card-mastercard.gif', class: 'card-logo'%>
          <%= image_tag 'card-jcb.gif', class: 'card-logo'%>
          <%= image_tag 'card-amex.gif', class: 'card-logo'%>
        </div>
      </div>
      <div class="form-group">
        <div class='form-text-wrap'>
          <label class="fo-text">有効期限</label>
          <span class="indispensable">必須</span>
        </div>
        <div class='input-expiration-date-wrap'>
          <%= f.text_area :exp_month, class:"input-expiration-date", id:"card-exp-month", placeholder:"例)3" %>
          <p>月</p>
          <%= f.text_area :exp_year, class:"input-expiration-date", id:"card-exp-year", placeholder:"例)23" %>
          <p>年</p>
        </div>
      </div>
      <div class="form-group">
        <div class='form-text-wrap'>
          <label class="form-text">セキュリティコード</label>
          <span class="indispensable">必須</span>
        </div>
        <%= f.text_field :cvc,class:"input-default", id:"card-cvc", placeholder:"カード背面4桁もしくは3桁の番号", maxlength:"4" %>
      </div>
    </div>
    <%# /カード情報の入力 %>
    
    <%# 配送先の入力 %>
    <div class='shipping-address-form'>
      <h1 class='info-input-haedline'>
        配送先入力
      </h1>
      <div class="form-group">
        <div class='form-text-wrap'>
          <label class="form-text">郵便番号</label>
          <span class="indispensable">必須</span>
        </div>
        <%= f.text_field :post_num, class:"input-default", id:"postal-code", placeholder:"例）123-4567", maxlength:"8" %>
      </div>
      <div class="form-group">
        <div class='form-text-wrap'>
          <label class="form-text">都道府県</label>
          <span class="indispensable">必須</span>
        </div>
        <%= f.collection_select(:prefecture_id, Prefecture.all, :id, :name, {}, {class:"select-box", id:"prefecture"}) %>
      </div>
      <div class="form-group">
        <div class='form-text-wrap'>
          <label class="form-text">市区町村</label>
          <span class="indispensable">必須</span>
        </div>
        <%= f.text_field :city, class:"input-default", id:"city", placeholder:"例）横浜市緑区"%>
      </div>
      <div class="form-group">
        <div class='form-text-wrap'>
          <label class="form-text">番地</label>
          <span class="indispensable">必須</span>
        </div>
        <%= f.text_field :street_num, class:"input-default", id:"addresses", placeholder:"例）青山1-1-1"%>
      </div>
      <div class="form-group">
        <div class='form-text-wrap'>
          <label class="form-text">建物名</label>
          <span class="form-any">任意</span>
        </div>
        <%= f.text_field :building_num, class:"input-default", id:"building", placeholder:"例）柳ビル103"%>
      </div>
      <div class="form-group">
        <div class='form-text-wrap'>
          <label class="form-text">電話番号</label>
          <span class="indispensable">必須</span>
        </div>
        <%= f.text_field :tell_num, class:"input-default", id:"phone-number", placeholder:"例）09012345678",maxlength:"11"%>
      </div>
    </div>
    <%# /配送先の入力 %>
    <div class='buy-btn'>
      <%= f.submit "購入" ,class:"buy-red-btn" %>
    </div>
    <% end %>
  </div>
</div>
<%= render "shared/second-footer"%>
<% end %>

エラー内容

Uncaught TypeError: Cannot read property 'addEventListener' of null

仮説内容

nullが返されているので、要素がなくaddEventListenerの反応ができないと考えています。
form_withの記述が誤りで要素が取得できないのかと思いましたが、これで大丈夫ではないかと思いました。
調べてみても限界です。

実現したいこと

html.erbの要素を取得したいです。しかしform_withメソッドの要素を取得することができない,nullが返ることを改善したいです。

改善策やアドバイスをいただけないでしょうか？宜しくお願い致します。

Answer 1

解決結果

index.html.erbのform_withが二つあることが原因でidを取得することができませんでした。
トップにあるこちら
<%= form_with(model: @order_form, url: item_orders_path, method: :post, local: true) do |form| %>
を削除して、もう一つの
<%= form_with(mode: @order_form, local: true, url: item_orders_path, id: 'charge-form', class: 'transaction-form-wrap') do |f| %>
をトップに持ってくることで改善することが可能になりました。