投稿した後に編集する際、動的に追加されたセレクトフォームに投稿した値を置きたい。

機能実装を行っています。
一度、動的に追加されたセレクトフォームで選択し、投稿した後に編集する際、jqueryで動的に追加されたそのセレクトフォームに投稿した値をデフォルト値として選択された状態で置きたいと思っています。
データベースからその値を引っ張ってこようにも、jqueryで動的に追加されたセレクトフォームは、静的に設置されているセレクトフォームみたいにデフォルト値として置くことが出来ずに困っています。

どうすればデータベースから動的に追加されたセレクトフォームにも投稿した時の値を置くことがご教授いただければ幸いです。

よろしくお願いします。

edit.html.erb

html
1<body class="">
2  <div class="single-container">
3    <%= form_for @item do |f| %>
4      <%= f.hidden_field :user_id, value: current_user.id %>
5      <main class="single-main">
6        <section class="l-single-container buy-item-container">
7          <div data-reactroot="">
8            <div class="sell-container-inner">
9              <h2 class="l-single-head">商品の情報を入力</h2>
10              <form class="sell-form">
11                <div class="sell-content clearfix">
12                  <h3 class="sell-sub-head">配送について</h3>
13                  <%= link_to "/jp/help_center/article/68/", target:"_blank", class: "form-question" do %>
14                    ?
15                  <% end %>
16                  <div class="sell-form-box">
17                    <div class="form-group" id="delivery">
18                      <label>配送料の負担
19                        <span class="form-require">必須</span>
20                      </label>
21                      <div class="select-wrap">
22                        <%= f.select :shipping, {"---": 0, "送料込み(出品者負担)": 1, "着払い(購入者負担)": 2}, {}, { class: "select-default", id: "select-pay"} %>
23                        <%= fa_icon "angle-down" %>
24                      </div>
25                    </div>
26                  </div>
27                </div>
28              </form>
29              <div class="overlay"></div>
30            </div>
31          </div>
32        </section>
33      </main>
34    <% end %>
35  </div>
36</body>

items_controller.rb

Ruby
1class ItemsController < ApplicationController
2  before_action :authenticate_user!, only: :new
3  before_action :set_item, only: [:change, :edit, :update, :destroy]
4
5  def index
6    @items = Item.order("created_at DESC").page(params[:page]).per(20)
7  end
8
9  def new
10    @item = Item.new
11    @item.item_images.build
12  end
13
14  def create
15    @item = Item.new(item_params)
16    if @item.save
17      redirect_to :root
18    else
19      render :new
20    end
21  end
22
23  def show
24  end
25
26  def change
27  end
28
29  def edit
30  end
31
32  def update
33    if @item.user_id == current_user.id
34      @item.update(item_params)
35    end
36  end
37
38  def destroy
39    @item.destroy if @item.user_id == current_user.id
40    redirect_to lisiting_item_path(current_user.id)
41  end
42
43
44  private
45  def item_params
46    params.require(:item).permit(
47      :name,
48      :introduction,
49      :price,
50      :shipping,
51      :item_size,
52      :condition,
53      :shipper,
54      :brand_id,
55      :big_category_id,
56      :middle_category_id,
57      :small_category_id,
58      :delivery,
59      :prefecture,
60      :status,
61      item_images_attributes: [:image, :status]
62      ).merge(user_id: current_user.id)
63  end
64
65  def set_item
66    @item = Item.find(params[:id])
67  end
68end
69

edit.js

jQuery
1$(function(){
2   // 配達の方法
3  function buildPAY(){
4    var html = `<div class="form-group", id="add-derivery-1">
5                  <label>配送の方法
6                    <span class="form-require">必須</span>
7                  </label>
8                  <div class="select-wrap">
9                    <select class="select-default" name="item[shipper]">
10                      <option value="3">---</option>
11                      <option value="4">未定</option>
12                      <option value="5">らくらくメルカリ便</option>
13                      <option value="6">ゆうメール</option>
14                      <option value="7">レターパック</option>
15                      <option value="8">普通郵便(定形、定形外)</option>
16                      <option value="9">クロネコヤマト</option>
17                      <option value="10">ゆうパック</option>
18                      <option value="11">クリックポスト</option>
19                      <option value="12">ゆうパケット</option>
20                    </select>
21                    <i class="fas fa-angle-down"></i>
22                  </div>
23                </div>`
24    return html;
25  }
26
27   // 配達の方法
28  function buildPAY2(){
29    var html = `<div class="form-group", id="add-derivery-2">
30                  <label>配送の方法
31                    <span class="form-require">必須</span>
32                    </label>
33                    <div class="select-wrap">
34                      <select class="select-default" name="item[shipper]">
35                        <option value="13">---</option>
36                        <option value="14">未定</option>
37                        <option value="15">クロネコヤマト</option>
38                        <option value="16">ゆうパック</option>
39                        <option value="17">ゆうメール</option>
40                      </select>
41                      <i class="fas fa-angle-down"></i>
42                    </div>
43                  </div>`
44      return html;
45  }
46
47  // 配送料の負担
48  $("#select-pay").on('change', function(){
49    // 値を取得
50    var area = $("#select-pay").val();
51    if (area == 1){
52      var html = buildPAY();
53      $('#delivery').append(html)
54    }
55    else { (area != 1)
56      $('#add-derivery-1').remove();
57    }
58    if (area == 2){
59      var html = buildPAY2();
60      $('#delivery').append(html)
61    }
62    else { (area != 2)
63      $('#add-derivery-2').remove();
64    }
65  });
66
67
68
69   // 編集
70  $(document).ready(function(){
71    // 値を取得
72    var area = $("#select-pay").val();
73
74    if (area == 1){
75      var html = buildPAY();
76      $('#delivery').append(html)
77      $('.select-default option[value=""]').prop('selected', 'selected')
78    }
79    else { (area != 1)
80      $('#add-derivery-1').remove();
81    }
82    if (area == 2){
83      var html = buildPAY2();
84      $('#delivery').append(html)
85      $('.select-default option[value=""]').prop('selected', 'selected')
86    }
87    else { (area != 2)
88      $('#add-derivery-2').remove();
89    }
90  });
91});