ancestryによる多階層構造データを用いた動的カテゴリーセレクトボックスで、子カテゴリーのセレクトボックスが起動しない

Question

解決したいこと

家計簿アプリ作成にあたり、支出入力画面を作成しております。
ancestryを用いて親カテゴリーが選択されるとイベント発火し、子カテゴリーのセレクトボックスが表示されるフォームを作成したいと考えておりますが、うまく起動しません。
(親カテゴリーのデータ新規登録は問題なく行えております。)

下記ファイルに問題があると考えますが、エラー箇所がわからず質問させていただきました。

参照サイト

https://qiita.com/ATORA1992/items/bd824f5097caeee09678

問題ファイル（推測）

$(function(){
  // カテゴリーセレクトボックスのオプションを作成
  function appendOption(category){
    var html = `<option value="${category.name}" data-category="${category.id}">${category.name}</option>`;
    return html;
  }
  // 子カテゴリーの表示作成
  function appendChidrenBox(insertHTML){
    var childSelectHtml = '';
    childSelectHtml = `<div class='listing-select-wrapper__added' id= 'children_wrapper'>
                        <div class='listing-select-wrapper__box'>
                          <select class="listing-select-wrapper__box--select" id="child_category" name="category_id">
                            <option value="---" data-category="---">---</option>
                            ${insertHTML}
                          <select>
                          <i class='fas fa-chevron-down listing-select-wrapper__box--arrow-down'></i>
                        </div>
                      </div>`;
    $('.listing-product-detail__category').append(childSelectHtml);
  }
  // 親カテゴリー選択後のイベント
  $('#parent_category').on('change', function(){
    var parentCategory = document.getElementById('parent_category').value; //選択された親カテゴリーの名前を取得
    if (parentCategory != "---"){ //親カテゴリーが初期値でないことを確認
      $.ajax({
        url: 'get_category_children',
        type: 'GET',
        data: { parent_name: parentCategory },
        dataType: 'json'
      })
      .done(function(children){
        $('#children_wrapper').remove(); //親が変更された時、子以下を削除するする
        $('#grandchildren_wrapper').remove();
        $('#size_wrapper').remove();
        $('#brand_wrapper').remove();
        var insertHTML = '';
        children.forEach(function(child){
          insertHTML += appendOption(child);
        });
        appendChidrenBox(insertHTML);
      })
      .fail(function(){
        alert('カテゴリー取得に失敗しました');
      })
    }else{
      $('#children_wrapper').remove(); //親カテゴリーが初期値になった時、子以下を削除するする
      $('#grandchildren_wrapper').remove();
      $('#size_wrapper').remove();
      $('#brand_wrapper').remove();
    }
  });
});

関係ファイル

class PaysController < ApplicationController
  ・・・

  def new
    @pay = Pay.new
    @category_parent_array = Category.where(ancestry: nil)
    @families = Family.where(params[:id])
  end

  # 親カテゴリーが選択された後に動くアクション
  def get_category_children
    # 選択された親カテゴリーに紐づく子カテゴリーの配列を取得
    @category_children = Category.find("#{params[:parent_id]}").children
  end

  def create
    @pay = Pay.new(pay_params)
    @pay.save
    redirect_to pays_path
  end

  ・・・

  private

  def pay_params
    params.require(:pay).permit(:user_id,:category_id,:family_id,:price,:date,:memo)
  end

  def set_category
    @category_parent_array = Category.where(ancestry: nil)
  end

end

・・・
<%= form_with(model: @pay, url: pays_path, method: :post, local: true) do |f| %>
・・・
  <div class="field form-group row">
 　 <!--親カテゴリーのセレクトボックス-->
  <%= f.collection_select :category_id, @category_parent_array,:id, :name,{ include_blank: "選択してください"},{class:"form-control"} %>
  </div>
          ・・・
  <div class="actions">
      <%= f.submit "登録", class:"form-button" %>
  </div>
<% end %>
      

json.array! @category_children do |child|
  json.id child.id
  json.name child.name
end

Answer 1

下記ページを参照し、gemを利用した方法で解決致しました。

https://qiita.com/kenz-dev/items/07f6b5f7fdcf2761ac8f
こちらではセレクトボックスは単体で記述されておりましたが、form_with 内に組み込むことで他のカラムとまとめて登録できるように修正しております。