【Rails】Webpacker利用時、一部のjsが動作しない

発生している問題

erbファイル内の<script>タグ内に記述したJavaScriptをapp/javascript/packs/application.jsに移動した時、一部のコードが動作しなくなる

移動しても動作するパターン

移動前

erb
1<div>
2  <p>ページ内のコンテンツ</p>
3</div>
4<script>
5$(function () {
6  $("#hoge").css("color", "blue");
7});
8</script>

移動後

erb
1<div>
2  <p>ページ内のコンテンツ</p>
3</div>

js
1//app/javascript/packs/application.js
2$(function () {
3  $("#hoge").css("color", "blue");
4});

移動すると動かなくなるパターン

移動前

erb
1<div>
2   <button class="open_modal" data-kind="title" id='add_title'>モーダルを開く</button>
3</div>
4<div id="overlay"></div>
5<div id="form_title">モーダルの中身です。</div>
6
7<script>
8$(function () {
9  $('.open_modal').on('click', function () {
10    id = $(this).data('kind');
11    $('#overlay').fadeIn();
12    $('#form_' + id).fadeIn();
13  });
14});
15</script>

移動後

erb
1<div>
2   <button class="open_modal" data-kind="title" id='add_title'>モーダルを開く</button>
3</div>
4<div id="overlay"></div>
5<div id="form_title">モーダルの中身です。</div>

js
1//app/javascript/packs/application.js
2$(function () {
3  $('.open_modal').on('click', function () {
4    id = $(this).data('kind');
5    $('#overlay').fadeIn();
6    $('#form_' + id).fadeIn();
7  });
8});

どちらも同じようにコードをerbからjsに移動しているだけなのですが、なぜか片方が動いて片方が動きません。
何かアドバイスをいただけると嬉しいです。

どうぞよろしくお願いいたします。

追記

erb
1# app/views/layouts/application.html.erb
2<head>
3  <title><%= full_title(yield(:title)) %></title>
4  <meta name="viewport" content="width=device-width">
5  <%= csrf_meta_tags %>
6  <%= csp_meta_tag %>
7  <%= favicon_link_tag('other/favicon_bgw.png') %>
8  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
10</head>