【JavaScript】画像投稿時のプレビュー機能

画像複数投稿機能以上に詰まっていたプレビュー機能。
ようやく解決できたので備忘録のために投稿します。
jsの記述のルールや基礎的なところ抑えていかなければと思いました。

下記解決後コード
2,14,15,30行目の記述に変更を加えています。

document.addEventListener('DOMContentLoaded', function() {
  if (document.getElementById('store-image')){
    const ImageList = document.getElementById('image-list')
    
    const createImageHTML = (blob) => {
      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', `store-image-${imageElementNum}`)
      inputHTML.setAttribute('name', 'store[images][]')
      inputHTML.setAttribute('type', 'file')

      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('store-image').addEventListener('change', (e) => {
      let file = e.target.files[0];
      let blob = window.URL.createObjectURL(file);

      createImageHTML(blob)
    });
  };
});

  <div class="field" >
    <%= f.label :images, "店舗画像" %><br />
    <%= f.file_field :images, name: 'store[images][]' ,id:"store-image"%>
  </div>

　　
以下解決前コード
2,14,15,30行目の記述に誤りがあったようです。（アンダーバーのせいでしょうか）

document.addEventListener('DOMContentLoaded', function() {
  if (document.getElementById('store_image')){
    const ImageList = document.getElementById('image-list')
    
    const createImageHTML = (blob) => {
      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', `store_image${imageElementNum}`)
      inputHTML.setAttribute('name', 'store[images][]')
      inputHTML.setAttribute('type', 'file')

      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('store_image').addEventListener('change', (e) => {
      let file = e.target.files[0];
      let blob = window.URL.createObjectURL(file);

      createImageHTML(blob)
    });
  };
});

　　
viewの方では無理矢理画像追加のボタンを2つ用意して投稿していました。

  <div class="field" >
    <%= f.label :images, "店舗画像" %><br />
    <%= f.file_field :images, multiple: true %>
    <%= f.file_field :images, multiple: true %>
  </div>