JSによる多階層カテゴリー選択フォームでの編集を可能にする

###問題点
下記コードで出品時（new.html.haml）はうまくカテゴリーを取得できるのですが、
編集時（edit.html.haml）はうまくカテゴリーを取得できず、困っています。

###ゴール
編集画面に遷移した時点で、登録したカテゴリーがselectedされていて、かつ、出品時のようにカテゴリーをうまく取得及び選択できるようにしたい。

###該当コード

haml
1          .form__box__above
2            .form__group2
3              = f.label :category do
4                カテゴリー
5                %span.form-description.form-require 必須
6              = f.select :category, @category_parents_array, {include_blank: '選択してください'},{class: "exhibition__select",id: "parent_category",name: ""}
7            .form__group2
8              = f.label :category do
9                カテゴリー
10                %span.form-description.form-require 必須
11              = f.select :category, @category_children_array,{include_blank: '選択してください'},{class: "exhibition__select",id: "children_category",name: ""}
12            .form__group2
13              = f.label :category do
14                カテゴリー
15                %span.form-description.form-require 必須
16              = f.select :category, @category_grandchildren_array,{include_blank: '選択してください'},{class: "exhibition__select",id: "grandchildren_category",name: "product[category_id]"}

Ruby
1 def edit
2　　・
3　　・
4　　・
5　省略
6  #カテゴリー編集用
7    # 登録されている商品の孫カテゴリーのレコードを取得し、孫カテゴリー選択肢用の配列作成
8    @selected_category = @product.category
9    @category_grandchildren_array = []
10      Category.find("#{@selected_category.id}").siblings.each do |grandchild|
11        grandchildren_hash = {id: "#{grandchild.id}", name: "#{grandchild.name}"}
12        @category_grandchildren_array << grandchildren_hash
13      end
14    # binding.pry
15    # 選択されている子カテゴリーのレコードを取得し、子カテゴリー選択肢用の配列作成
16    @selected_child_category = @selected_category.parent
17    @category_children_array = []
18      Category.find("#{@selected_child_category.id}").siblings.each do |child|
19        children_hash = {id: "#{child.id}", name: "#{child.name}"}
20        @category_children_array << children_hash
21      end
22    # 選択されている親カテゴリーのレコードを取得し、親カテゴリー選択肢用の配列作成
23    @selected_parent_category = @selected_category.parent
24    @category_parents_array = []
25      Category.find("#{@selected_parent_category.id}").siblings.each do |parent|
26        parent_hash = {id: "#{parent.id}", name: "#{parent.name}"}
27        @category_parents_array << parent_hash
28      end
29end

JavaScript
1// カテゴリー選択部分
2$(function(){
3  function appendOption(category){
4    var html = `<option value="${category.id}">${category.name}</option>`;
5    return html;
6  }
7  // 子カテゴリーの表示作成
8  function appendChildrenBox(insertHTML){
9  var childSelectHtml = '';
10  childSelectHtml =`<div class="form__group2" id="children_box">
11                      <label for="product_category">カテゴリー
12                        <span class="form-description form-require">必須</span>
13                      </label>
14                      <select class="exhibition__select" id="children_category" name=''>
15                        <option value="">選択してください</option>
16                        ${insertHTML}
17                      </select>
18                    </div>`;
19  $('.form__box__above').append(childSelectHtml);
20  }
21  // 孫カテゴリーの表示作成
22  function appendGrandchildrenBox(insertHTML){
23    var grandchildSelectHtml = '';
24    grandchildSelectHtml =`<div class="form__group2" id="grandchildren_box">
25                            <label for="product_category">カテゴリー
26                              <span class="form-description form-require">必須</span>
27                            </label>
28                            <select class="exhibition__select" id="grandchildren_category" name='product[category_id]'>
29                              <option value="">選択してください</option>
30                              ${insertHTML}
31                            </select>
32                          </div>`;
33    $('.form__box__above').append(grandchildSelectHtml);
34  }
35  // 親カテゴリー選択時のイベント
36  $(document).on('change', '#parent_category', function(){
37    var productCategory = document.getElementById('parent_category').value; //選択された親カテゴリーの取得
38    if (productCategory != ""){ //親カテゴリーが初期値以外
39      $.ajax({
40        url: 'category_children',
41        type: 'GET',
42        data: { productCategory: productCategory},
43        dataType: 'json'
44      })
45      .done(function(children){
46        $('#children_box').remove(); //親が変更時、子以下を削除
47        $('#grandchildren_box').remove();
48        var insertHTML = '';
49        children.forEach(function(child){
50          insertHTML += appendOption(child);
51        });
52        appendChildrenBox(insertHTML);
53      })
54      .fail(function(){
55        alert('カテゴリー選択に失敗しました');
56      })
57    }else{ //親カテゴリーが初期値
58      $('#children_box').remove(); 
59      $('#grandchildren_box').remove();
60    }
61  });
62    // 子カテゴリー選択時のイベント
63  $(document).on('change', '#children_category', function(){
64    var productCategory = document.getElementById('children_category').value; //選択された子カテゴリーの取得
65    if (productCategory != ""){ //子カテゴリーが初期値以外
66      $.ajax({
67        url: 'category_grandchildren',
68        type: 'GET',
69        data: { productCategory: productCategory},
70        dataType: 'json'
71      })
72      .done(function(grandchildren){ //子が変更時、孫を削除
73          var insertHTML = '';
74          grandchildren.forEach(function(grandchild){
75            insertHTML += appendOption(grandchild);
76          });
77          appendGrandchildrenBox(insertHTML);
78          $(document).on('change', '#children_category', function(){
79              $('#grandchildren_box').remove();
80            })
81      })
82      .fail(function(){
83        alert('カテゴリー選択に失敗しました');
84      })
85    }else{ //子カテゴリーが初期値
86      $('#grandchildren_box').remove();
87    }
88  });
89});