フリマクローンサイト複数枚画像の投稿と編集方法

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
ruby on rails でフリマアプリのクローンを作っています。
商品出品機能と商品編集機能で複数枚の画像投稿機能とその編集の実装中に問題が生じています。
商品編集で出品時に投稿された画像が削除できません。追加はできます。

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

出品済み商品を編集する際、既に投稿済みの画像が削除できない。（新たに追加はできる。）

該当のソースコード

Ruby
1JSコード
2
3document.addEventListener("turbolinks:load"
4, function () {
5
6  const buildFileField = (num)=> {
7    const html = `<div data-index="${num}" class="js-file_group">
8                  <input class="js-file" type="file"
9                    name="item[item_images_attributes][${num}][src]"
10                    id="item_item_images_attributes_${num}_src"><br>
11                  </div>`;
12    return html;
13  }
14
15  const buildImg = (index, url)=> {
16    const html = `<div class="image-box">
17
18                    <img data-index="${index}" src="${url}" width="112px" height="112px">
19                    
20                      <div class="js-remove">削除</div>
21                      <div class="js-edit">編集</div>
22                      
23                  </div>`;
24    return html;
25  }
26
27  let fileIndex = [1,2,3,4,5,6,7,8,9,10];
28  
29  lastIndex = $('.js-file_group:last').data('index');
30  fileIndex.splice(0, lastIndex);
31
32  $('.hidden-destroy').hide();
33
34  $('#image-box').on('change', '.js-file', function(e)  {
35
36    const targetIndex = $(this).parent().data('index');
37    
38    const file = e.target.files[0];
39    const blobUrl = window.URL.createObjectURL(file);
40    
41    if (img = $(`img[data-index="${targetIndex}"]`)[0]) {
42      img.setAttribute('src', blobUrl);
43    } else {  
44      
45      // $('#previews').prepend(buildImg(targetIndex, blobUrl));
46      $('.item_image').before(buildImg(targetIndex, blobUrl));
47
48      // if($(".js-file_group").length >= 10){
49      //   return false;
50      // } else {
51
52      $('label.item_image').attr("for", `item_item_images_attributes_${targetIndex + 1}_src`);
53
54      $('#image-box').prepend(buildFileField(fileIndex[0]));
55      fileIndex.shift();
56      console.log(fileIndex);
57      
58      fileIndex.push(fileIndex[fileIndex.length - 1] + 1);
59      console.log(fileIndex);
60      
61
62      // lastIndex = $('.js-file_group:last').data('index');
63      // fileIndex.push(lastIndex);
64
65      }
66    // }
67
68  });
69
70  $('#image-box').on('click', '.js-edit', function() {
71    const targetIndex = $(this).prev().prev().data('index');
72    $(`#item_item_images_attributes_${targetIndex}_src`).trigger("click");;
73  });
74
75  $('#image-box').on('click', '.js-remove', function() {
76      // debugger
77    const targetIndex = $(this).prev().data('index');
78    const inputField = $(`#item_item_images_attributes_${targetIndex}_src`)
79    inputField.parent().remove();
80    inputField.remove();
81
82
83    const hiddenCheck = $(`input[data-index="${targetIndex}"].hidden-destroy`);
84
85    if (hiddenCheck) hiddenCheck.prop('checked', true);
86    
87    const hiddenCheckEdit = $(`#item_item_images_attributes_${targetIndex}__destroy`);
88    if (hiddenCheckEdit) hiddenCheckEdit.prop('checked', true);
89
90    $(this).parent().remove()
91    $(`img[data-index="${targetIndex}"]`).remove();
92
93    if ($('.js-file').length == 0) $('#image-box').insertAdjacentHTML(buildFileField(fileIndex[0]));
94
95    let i = 1;
96    while (i <= 10) {
97      if (fileIndex.includes(i)==false) {
98        fileIndex.push(i)
99        break;
100      }
101      i = i + 1;
102    }
103  });
104});

ruby
1html.hamlコード
2
3.Item__box__field__picture
4      = form_with model: @item do |f|
5        - if @item.errors.any?
6          .Item__box__errors
7            %ul
8              - @item.errors.full_messages_for(:item_image).each do |message|
9                %li= message
10        .Item__box__field__picture__preview
11          %div#image-box
12            %div#previews
13              - if @item.persisted?
14                - @item.item_images.each_with_index do |item_image, i|
15                  %div.image-box
16                    = image_tag item_image.src.url, data: { index: i }, width: "112", height: '112'
17                .outer-frame
18                  .inner-frame
19                    .js-edit 編集
20                    .js-remove 削除
21              - if @item.persisted?
22                %label.item_image{for: "item_item_images_attributes_#{@item.item_images.length}_src"}
23                  %i.fa.fa-camera
24              - else
25                %label.item_image{for: "item_item_images_attributes_#{@item.item_images.length-1}_src"}
26                  %i.fa.fa-camera
27            = f.fields_for :item_images do |item_image| 
28              %div{"data-index": item_image.index, class: 'js-file_group'}
29                = item_image.file_field :src, class: 'js-file'
30              - if @item.persisted?
31                = item_image.check_box :_destroy, data:{ index: item_image.index }, class: 'hidden-destory'
32              - if @item.persisted?
33                %div{"data-index": @item.item_images.count, class: 'js-file_group'}
34                  = file_field_tag :"item_item_images_attributes_#{@item.item_images.length}_src", name: "item[item_images_attributes][#{@item.item_images.count}][src]", class: 'js-file'
35
36
37