編集画像の差し替えについて

前提・実現したいこと

投稿した商品画像の差し替え。

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

複数投稿した商品を編集するときに、差し替えた画像が反映されない。
例：当初２枚投稿した画像でのeditページに画像４枚編集して追加すると、
　当初の２枚を上書きする様に編集されます。

該当のソースコード

edit.html.haml

haml
1
2- if user_signed_in? 
3  = form_with model: @product, local:true do |f|
4    = render 'error_messages'
5    .entire_box
6      .new__page__header
7        = link_to image_tag("logo/logo.png", alt: "logo"), root_path
8      .product__field
9        .product__field__box
10          .product__label
11            .product__label__name      
12              出品画像
13            .product__label__required
14              必須
15            .product__label__text
16              ※最大5枚までアップロードできます
17          .form-image
18            = f.fields_for :images do |image|
19              .image_file_box
20                // 写真のプレビューとインプットボタンのul
21                %ul#previews
22                  - @product.images.each do |image|
23                    -if image.persisted?
24                      %li.image-preview
25                        = image_tag image.image.url
26                        .image-preview_btn
27                          .image-preview_btn_delete
28                            削除
29                  %li.input
30                    // 画像を取り込むインプットボタン
31                    %label.upload-label
32                      .upload-label__text
33                        ファイルをアップロード
34                      .input-area
35                        = icon('fas fa', 'camera', class:'image-icon')
36                        = image.file_field :image, class: "hidden image_upload", name: "product[images_attributes][#{@product.images.length}][image]", id: "product[images_attributes][#{@product.images.length}][image]"
37
38後略

controller

class ProductsController < ApplicationController
  require 'payjp'
  before_action :set_product, only: [:show, :destroy, :edit, :update, :purchase_check, :purchase_completed]

略

  def edit
    @product.images.new

    @category_parent_array = ["---"]
    @category_parent_array = Category.where(ancestry: nil)
  end

  def update
    if @product.update(product_params)
      redirect_to product_path(@product.id)
    else
      redirect_to action: :edit
    end
  end

  def create
     @product = Product.new(product_params)
     if @product.save
       redirect_to root_path
     else
       @product.images.new
       render :new
     end
  end

略

  private

  def set_product
    # レコードの存在を確認し、なければnot_foundを返す
    if Product.exists?(params[:id])
      @product = Product.find(params[:id])
    else
      redirect_to not_found_path
    end  
  end

  def product_params
    params.require(:product).permit(:product_name, :product_detail, :category_id, :brand, :delivery_area, :price, :size_id, :product_status_id, :delivery_fee_id, :delivery_time_id, :trading_status,images_attributes: [:image, :id, :_destory]).merge(user_id: current_user.id)
  end
end

routes

Rails.application.routes.draw do
  get 'purchase/index'
  get 'purchase/done'
  devise_for :users, controllers: {
    registrations: 'users/registrations',
  }
  devise_scope :user do
    get 'addresses', to: 'users/registrations#new_address'
    post 'addresses', to: 'users/registrations#create_address'
  end

  root to: 'items#index'

  resources :users, only: [:index]
  resources :mypages, only: [:show, :index]
  resources :creditcards

  
  resources :products do
    collection do
      get 'done', to: 'products#done'
      get 'get_category_children', defaults: { format: 'json' }
      get 'get_category_grandchildren', defaults: { format: 'json' }
    end
    member do
      get 'purchase_check', to:'products#purchase_check'
      post 'purchase_completed', to:'products#purchase_completed'
      get 'products/:id' => 'products#show'
      get 'purchase_completed'

    end
  end

  end

// 画像の複数投稿およびプレビュー処理

$(function(){

  // プレビュー機能
  $(document).on('change', '.image_upload', function(e){
    // $liに追加するためのプレビュー画面のHTML。横長でないとバグる
    var preview = $('<div class="image-preview__wapper"><img class="preview"></div><div class="image-preview_btn"><div class="image-preview_btn_delete">削除</div></div>'); 
    //次の画像を読み込むためのinput。 
    var append_input = $(`<li class="input"><label class="upload-label"><div class="upload-label__text">ファイルをアップロード<div class="input-area"><i class="fas fa fa-camera image-icon"></i><input class="hidden image_upload" type="file"></div></div></label></li>`)

    // 変数ulに#previewsの要素を取得
    $ul = $('#previews')
    // 変数ulに#previewsの要素を取得
    // ここのthisは画像選択を行ったinput要素(image.file_field :image, class: "hidden image_upload")になる
    // このinputの先祖のli要素を取得
    $li = $(this).parents('li');
     // このinputの先祖の.upload-label要素を取得
    $label = $(this).parents('.upload-label');
  
    //inputに画像を読み込んだら、"プレビューの追加"と"新しいli追加"処理が動く
    // $('.image_upload').on('change', function (e) {
      //inputで選択した画像を読み込む
      var reader = new FileReader();

      // プレビューに追加させるために、inputから画像ファイルを読み込む。
      reader.readAsDataURL(e.target.files[0]);

      //画像ファイルが読み込んだら、処理が実行される。 
      reader.onload = function(e){
        //previewをappendで追加する前に、プレビューできるようにinputで選択した画像を<img>に'src'で付与させる
        // つまり、<img>タグに画像を追加させる
        $(preview).find('.preview').attr('src', e.target.result);
      }

      //inputの画像を付与した,previewを$liに追加。
      $li.append(preview);

      //プレビュー完了後は、inputを非表示にさせる。これによりプレビューだけが残る。
      $label.css('display','none'); // inputを非表示
      $li.removeClass('input');     // inputのクラスはjQueryで数を数える時に邪魔なので除去
      $li.addClass('image-preview'); // inputのクラスからプレビュー用のクラスに変更した
      $lis = $ul.find('.image-preview'); // クラス変更が完了したところで、プレビューの数を数える。 
      $('#previews li').css({
        'width': `120px`
      })

      //"ul"に新しい"li(inputボタン)"を追加させる。
      if($lis.length <= 4 ){
        $ul.append(append_input)
        // 入力枠を狭める処理
        $('#previews li:last-child').css({
          'width': `calc(100% - (20% * ${$lis.length}))`
        })
      }

      // 全てのimage_uploadを取得する
      $inputs = $ul.find('.image_upload');

      //inputの最後の"data-image"を取得して、input nameの番号を更新させてる。
      // これをしないと、それぞれのinputの区別ができず、最後の1枚しかDBに保存されません。
      // 全部のプレビューの番号を更新することで、プレビューを削除して、新しく追加しても番号が1,2,3,4,5,6と綺麗に揃う。だから全部の番号を更新させる
      $inputs.each( function( num, input ){
        //nameの番号を更新するために、現在の番号を除去
        $(input).removeAttr('name');
        $(input).attr({
          // name:"product[images_attributes][" + num + "][image]",
          name:`product[images_attributes][${num}][image]`,
          id:"product_images_attributes_" + num + "_image"
        });
      });
  })
});

// エラーがでたときにインプットボタンを１つに戻す（複数投稿しちゃうとその数だけボタンが残っちゃうので）
$(window).on('load', function () {
  var image_files = document.getElementsByClassName('image_file_box');
  const imgLength = image_files.length;
  
  for (var i = (imgLength - 1) ; i >= 1 ; i--) {
    image_files[i].remove();
  }
});

全く何をしたらいいのかわからない状態です。よろしくお願いします。