複数のファイルを選択できるようにしたい

前提・実現したいこと

複数のファイルを選択、削除できるようにしたい

発生している問題

一つのファイルを選択したら、新しくファイルを選択するためのdivが生成されるようにしたいのですが、うまくいきません。
また、削除するために削除ボタンを押してもうまく機能しません。

id名、クラス名の確認を行いましたが特に間違いはありませんでした。

該当のソースコード

haml
1//new.html.haml
2
3= form_for @product do |f|
4  商品名#{f.text_field :name}
5  %br/
6  価格#{f.number_field :price}
7  %br/
8  #image-box
9    = f.fields_for :images do |image|
10      .js-file_group{"data-index" => "#{image.index}"}
11        = image.file_field :src, class: 'js-file'
12        %br/
13        %span.js-remove 削除
14  = f.submit

javascript
1$(document).on('turbolinksload', ()=> {
2  // 画像用のinputを生成する関数
3  const buildFileField = (index)=> {
4    const html = `<div class="js-file_group" data-index="${index}">
5                    <input class="js-file" type="file"
6                    name="product[images_attributes][${index}][src]"
7                    id="product_images_attributes_${index}_src">
8                    <br>
9                    <span class="js-remove">削除</div>
10                  </div>`;
11    return html;
12  }
13
14  // file_fieldのnameに動的なindexをつける為の配列
15  let fileIndex = [1,2,3,4,5,6,7,8,9,10];
16
17  $('#image-box').on('change', '.js-file', function(e) {
18    // fileIndexの先頭の数字を使ってinputを作る
19    $('#image-box').append(buildFileField(fileIndex[0]));
20    fileIndex.shift();
21    // 末尾の数に1足した数を追加する
22    fileIndex.push(fileIndex[fileIndex.length - 1] + 1)
23  });
24
25  $('#image-box').on('click', '.js-remove', function() {
26    $(this).parent().remove();
27    // 画像入力欄が0個にならないようにしておく
28    if ($('.js-file').length == 0) $('#image-box').append(buildFileField(fileIndex[0]));
29  });
30});