JavaScriptで画像複数枚実装

前提・実現したいこと

初めての投稿です。
JavaScriptでの実装で画像レビューと画像複数枚保存できるようにしたいです。

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

Uncaught TypeError: Cannot read property 'appendChild' of null

該当のソースコード

javaScript
if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
  document.addEventListener('DOMContentLoaded', function() {
    const ImageList = document.getElementById('item-box-img');

     // 選択した画像を表示する関数
     const createImageHTML = (blob) => {
      // 画像を表示するためのdiv要素を生成
     const imageElement = document.createElement('div')
     imageElement.setAttribute('class', "image-element")
     let imageElementNum = document.querySelectorAll('.image-element').length


     // 表示する画像を生成
     const blobImage = document.createElement('img')
     blobImage.setAttribute('src', blob)
     
    //  ファイル選択ボタンを生成
     const inputHTML = document.createElement('input')
     inputHTML.setAttribute('id', `item_image${imageElementNum}`)
     inputHTML.setAttribute('name', 'item[images][]')
     inputHTML.setAttribute('type', 'file')

     // 生成したHTMLの要素をブラウザに表示させる
     imageElement.appendChild(blobImage)
     imageElement.appendChild(inputHTML)
     ImageList.appendChild(imageElement)

     inputHTML.addEventListener('change', (e) => {
      file = e.target.files[0];
      blob = window.URL.createObjectURL(file);

      createImageHTML(blob)

     })
    }

    document.getElementById('item-image').addEventListener('change', (e) => {
      let file = e.target.files[0];
      let blob = window.URL.createObjectURL(file);

      createImageHTML(blob)

    });
  });
}

該当のソースコード

class ItemsController < ApplicationController
  before_action :authenticate_user!, except: [:index, :show]
  before_action :set_item, only: [:show, :edit, :update, :destroy]
  def index
    @items = Item.all
  end

  def new
    @item = Item.new
  end

  def create
    @item = Item.new(item_params)
    if @item.valid?
      @item.save
      redirect_to root_path
    else
      render :new
    end
  end

  def show
  end

  def edit
  end

  def update
    if @item.update(item_params)
      redirect_to item_path
    else
      render :edit
    end
  end

  def destroy
    if @item.destroy
      redirect_to root_path
    end
  end

  private
  def item_params
    params.require(:item).permit(:name, :info, :category_id, :sales_status_id, :shipping_fee_status_id, :prefecture_id, :scheduled_delivery_id, :price, images: [:image]).merge(user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])
  end

end

該当のソースコード

<div class="items-sell-contents">
  <header class="items-sell-header">
    <%= link_to image_tag('furima-logo-color.png' , size: '185x50'), "/" %>

  </header>
  <div class="items-sell-main">
    <h2 class="items-sell-title">商品の情報を入力</h2>
    <%= form_with model: @item, local: true do |f| %>

    <%# インスタンスを渡して、エラー発生時にメッセージが表示されるようにしましょう。%>
    <%= render 'devise/shared/error_messages', model: f.object %>
    <%# //インスタンスを渡して、エラー発生時にメッセージが表示されるようにしましょう。%>

    <%# 出品画像 %>
    <div class="img-upload">
      <div class="weight-bold-text">
        出品画像
        <span class="indispensable">必須</span>
      </div>
      <div class="click-upload">
        <p>
          クリックしてファイルをアップロード
        </p>
        <%= f.file_field :images, name: 'item[images][]', id:"item-image" %>
      </div>
    </div>

該当のソースコード

<%= render "devise/shared/header" %>

<%# 商品の概要 %>
<div class="item-show">
  <div class="item-box">
    <h2 class="name">
      <%= @item.name %>
    </h2>
    <div class="item-img-content">
      <%= image_tag @item.images, class: "item-box-img" %>
      <%# 商品が売れている場合は、sold outを表示しましょう %>
      <% if @item.order.present? %>
      <div class="sold-out">
        <span>Sold Out!!</span>
      </div>
      <% end %>
      <%# //商品が売れている場合は、sold outを表示しましょう %>
    </div>
    <div class="item-price-box">
      <span class="item-price">
        ¥ <%= @item.price %>
      </span>
      <span class="item-postage">
        <%= @item.shipping_fee_status.name %>
      </span>
    </div>