【rails5】form_for内に複数のfile_fieldがあるとajax通信後に勝手に順番がズレる

遭遇している不具合はタイトルの通りなのですが、これだけだとよく分からないと思いますので、順を追って説明します。

まず、以下のような二つの画像が投稿できるformをajaxで実装しています。

イメージとしては、Itemモデルがあり、そのモデルは画像①（必須）、画像②（任意）を持つという形になっています。

######formのコードイメージ(画像投稿部分だけの簡易ver)

ruby
1= form_for(item, url: path , html:{id:'item_form', data_parsley_validate:"" ,multipart: true}, remote: true) do |f|
2
3  .form-group
4    .image_box
5      label for="top_image"
6        | 画像①（必須）
7        = f.file_field :top_image, accept: 'image/*', id: "top_image", class: "image_item pointer"
8
9  .form-group
10    .image_box
11      label for="top_image_2"
12        | 画像②（任意）
13        = f.file_field :top_image_2, accept: 'image/*', id: "top_image_2", class: "image_item pointer"
14
15  .form-group
16    = f.submit 'Submit', class:"btn", data: { disable_with: "Sending..." }

その上で、一点よく分からない不具合が発生しています。

例）
１・すでに投稿したアイテムの画像②を追加投稿しようとする
２・画像容量など何らかのバリデーションにかかる（不具合発生させるためにわざとです。）
３・投稿画面にエラーが表示される
--ここからが問題---
4・前述の投稿フォームの画像①のfile_field（表示時はinputタグ）が画像②のfile_fieldの位置に動き、画像②のfile_field（inputタグ）がHTML上から消えている。以下のイメージです。

######エラー発生後のformのコードイメージ

ruby
1= form_for(item, url: path , html:{id:'item_form', data_parsley_validate:"" ,multipart: true}, remote: true) do |f|
2
3  .form-group
4    .image_box
5      label for="top_image"
6        | 画像①（必須）
7
8  .form-group
9    .image_box
10      label for="top_image_2"
11        | 画像②（任意）
12        = f.file_field :top_image, accept: 'image/*', id: "top_image", class: "image_item pointer"
13
14  .form-group
15    = f.submit 'Submit', class:"btn", data: { disable_with: "Sending..." }

ちなみにページ自体を再読み込みしてあげると最初の正しいformに戻ります。

Controller側は以下の通りです。シンプルな処理しかしてません。

######更新時のControllerのupdateアクション

ruby
1def update
2  @item = Item.find(params[:id])
3  if @item.update(item_params)
4    @sussess = true
5    respond_to do |format|
6      format.js { flash[:info] = '情報が更新されました。' }
7    end
8  else
9    respond_to do |format|
10      format.js
11    end
12  end
13end

######Controller側で処理した後のupdate.js.slim
ここもシンプルです

ruby
1 - if @success == true
2  | window.location.href = "/managements/articles/#{@article.id}/edit";
3  
4- else 
5  | $('.alert').remove(); 
6  | $(" #{ j( render 'managements/shared/error_messages', object: @article )}").insertAfter(".x_title");

###自分で把握できていること
１・file_field（inputタグ）の場所が勝手に動くタイミングは、update.js.slimが実行された直後

２・試しにinputタグを画像②のfile_fieldの後に直書きした場合、name属性の有無で挙動が変わった。

ruby
1  .form-group
2    .image_box
3      label for="top_image"
4        | 画像①（必須）
5        = f.file_field :top_image, accept: 'image/*', id: "top_image", class: "image_item pointer"
6
7  .form-group
8    .image_box
9      label for="top_image_2"
10        | 画像②（任意）
11        = f.file_field :top_image_2, accept: 'image/*', id: "top_image_2", class: "image_item pointer"
12
13  .form-group
14    .image_box
15　　  input.image_item accept="image/*" name=""

【name属性のあるinputタグ】画像①のinputタグが画像②のinputタグに移り、画像②のinputタグがこの直書きしたinputタグに移った

ruby
1  .form-group
2    .image_box
3      label for="top_image"
4        | 画像①（必須）
5        
6
7  .form-group
8    .image_box
9      label for="top_image_2"
10        | 画像②（任意）
11        = f.file_field :top_image, accept: 'image/*', id: "top_image", class: "image_item pointer"
12        
13
14  .form-group
15    .image_box
16　　  = f.file_field :top_image_2, accept: 'image/*', id: "top_image_2", class: "image_item pointer"

　
【name属性のないinputタグ】画像①のinputタグが画像②のinputタグに移り、画像②のinputタグが消失。追加したname属性がないinputタグはそのまま。

ruby
1  .form-group
2    .image_box
3      label for="top_image"
4        | 画像①（必須）
5        
6
7  .form-group
8    .image_box
9      label for="top_image_2"
10        | 画像②（任意）
11        = f.file_field :top_image, accept: 'image/*', id: "top_image", class: "image_item pointer"
12
13  .form-group
14    .image_box
15　　  input.image_item accept="image/*"