2つのセレクトボックスをtemplate要素を使用して連動させたいです。

前提、実現したいこと

学習のため本の投稿アプリを作成しています。
投稿を作成する際にエリア(アジア、アフリカ等)、国(日本、エジプト等)の2つのセレクトボックスから地域を選んでもらいます。
エリアと国は親子関係にあります。
こちらの記事を参考にし、エリアのセレクトボックスと国のセレクトボックスをtemplate要素を使って連動させたいです。

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

template要素の部分にareaのidが渡らず、国のセレクトボックスが使えません。
検証ツールで見たところ、countryの選択部分では、
id="country-of-area#{area.id}"の#{area.id}部分が文字のままで、idの数字になっていませんでした。

該当のソースコード

new.html.erb

<%= form_with model: @book, url: books_path do |f| %> <%= render 'shared/error_messages' , object: f.object %> <div> <%= f.label :area, id: 'hoge' %><br> <%= f.collection_select :area, Area.all, :id, :name, { include_blank: "エリアを選択" } %> </div> <div> <%= f.label :country %><br> <%= f.select :country, [], { include_blank: "国を選択" }, class: "default-country-select" %> </div> <% Area.all.each do |area| %> <template id="country-of-area#{area.id}"> <%= f.collection_select :country, area.countries, :id, :name, { include_blank: "国を選択" } %> </template> <% end %>

area_select.js

import $ from 'jquery' $(document).on('turbo:load', function() { //HTMLが読み込まれた時の処理 let areaVal = $('#book_area').val(); //一度目に検索した内容がセレクトボックスに残っている時用のif文 if (areaVal !== "") { let selectedTemplate = $(`#country-of-area${areaVal}`); $('#book_country').remove(); $('#book_area').after(selectedTemplate.html()); }; //もともとある子要素用のセレクトボックスのHTML let defaultCountrySelect = `<select class="default-country-select" name="book[country]" id="book_country"> <option value>国を選択</option> </select>`; $(document).on('change', '#book_area', function() { let areaVal = $('#book_area').val(); //親要素のセレクトボックスが変更されてvalueに値が入った場合の処理 if (areaVal !== "") { let selectedTemplate = $(`#country-of-area${areaVal}`); //デフォルトで入っていた子要素のセレクトボックスを削除 $('#book_country').remove(); $('#book_area').after(selectedTemplate.html()); }else { //親要素のセレクトボックスが変更されてvalueに値が入っていない場合（include_blankの部分を選択している場合） $('#book_country').remove(); $('#book_area').after(defaultCountrySelect); }; }); });

area.rb

class Area < ApplicationRecord has_many :countries validates :name, presence: true end

country.rb

class Country < ApplicationRecord belongs_to :area has_many :prefectures has_many :books validates :name, presence: true end

よろしくお願いします。