【Ruby・jQuery】リロードしないとタブのコンテンツが表示されない

前提・実現したいこと

RubyにてjQueryを使用しページ内タブを実装しました。上手く機能はするのですが、他ページ（他ユーザーから見た該当のタブ）ではリロードしないとコンテンツが表示されません。リロードをしなくても上手く表示出来るよう改善したいです。

該当のソースコード(show.html.erb)

Ruby
1<div class="main user-show">
2  <div class="container">
3    <div class="user">
4      <img class="cover_photo" src="<%= "/user_cover_images/#{@user.cover_image_name}" %>">
5      <img class="photo" src="<%= "/user_images/#{@user.image_name}" %>">
6      <h2><%= @user.name %></h2>
7      <% if @user.id == @current_user.id %>
8        <%= link_to("編集", "/users/#{@user.id}/edit") %>
9        <%= link_to("削除", "/users/#{@user.id}/destroy", {method: :post, data: {confirm: "Are you sure to delete your account？"}, class: "link"}) %>
10      <% end %>
11    </div>
12
13    <h3>
14      <%= render 'users/follow_form' %>
15    </h3>
16    <h4>
17      <%= render 'users/stats' %>
18    </h4>
19
20    <!--タブ-->
21    <ul class="tab-group">
22    	<li class="tab is-active">Tab-A</li>
23    	<li class="tab">Tab-B</li>
24    	<li class="tab">Tab-C</li>
25    </ul>
26
27    <!--タブを切り替えて表示するコンテンツ-->
28    <div class="panel-group">
29    	<div class="panel is-show">Content-A</div>
30    	<div class="panel">Content-B</div>
31    	<div class="panel">Content-C</div>
32    </div>
33 </div>
34</div>

該当のソースコード(tab.js)

jQuery
1jQuery(function($){
2	$('.tab').click(function(){
3		$('.is-active').removeClass('is-active');
4		$(this).addClass('is-active');
5		$('.is-show').removeClass('is-show');
6        // クリックしたタブからインデックス番号を取得
7		const index = $(this).index();
8        // クリックしたタブと同じインデックス番号をもつコンテンツを表示
9		$('.panel').eq(index).addClass('is-show');
10	});
11});

該当のソースコード(users.scss)

CSS
1.tab-group{
2    display: flex;
3    justify-content: center;
4}
5
6.tab{
7    flex-grow: 1;
8    padding:5px;
9    list-style:none;
10    border:solid 1px #CCC;
11    text-align:center;
12    cursor:pointer;
13}
14
15.panel-group{
16    height:100px;
17    border:solid 1px #CCC;
18    border-top:none;
19    background:#eee;
20}
21
22.panel{
23    display:none;
24}
25
26.tab.is-active{
27    background:#00CCFF;
28    color:#FFF;
29}
30
31.panel.is-show{
32    display:block;
33}

試したこと

過去の質問や記事を参考に、"turbolinks:load"の辺りを以下の様にいじってみましたが上手くいきません。
どなたかお知恵を拝借頂けると幸いです。

該当のソースコード(tab.js)

jQuery
1li.addEventListener("turbolinks:load", function() {
2	jQuery(function($){
3		$('.tab').click(function(){
4			$('.is-active').removeClass('is-active');
5			$(this).addClass('is-active');
6			$('.is-show').removeClass('is-show');
7	        // クリックしたタブからインデックス番号を取得
8			const index = $(this).index();
9	        // クリックしたタブと同じインデックス番号をもつコンテンツを表示
10			$('.panel').eq(index).addClass('is-show');
11		});
12	});
13})
14

エラーメッセージ
Errno::EACCES in Users#show
Showing C:/Users/hoge/app/views/layouts/application.html.erb where line #9 raised:

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>