ハンバーガーメニューがページ遷移後に閉じれなくなる

学習歴3ヶ月の者です。現在ポートフォリオを作成中でbootstrapのNavbarのヘッダーを使用しています。
ハンバーガーメニュー部分がレスポンシブ時に、閉じれない状態です。

application.html.erb内の<script>内にて、javascriptで閉じるようにしたのですが、読み込んで最初のページではうまく閉じることができても、別のページに遷移した後、メニューを開くと、再び閉じれなくなります。

何が原因でハンバーガーメニューが閉じれないのでしょうか？
どなたか教えていただけたら幸いです。よろしくお願いします。

layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Mygourmet</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!--bootstrapを使用-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <!--fontawesomeを使用-->
    <script defer src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" integrity="sha384-haqrlim99xjfMxRP6EWtafs0sB1WKcMdynwZleuUSwJR0mDeRYbhtY+KPMr+JL6f" crossorigin="anonymous"></script>
  </head>

  <body>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script>
      //ハンバーガーメニューを閉じれるよう設定
      $('.navbar-nav>li>a , .dropdown-menu>a').on('click', function(){
          if(this.id != 'navbarDropdown'){
            $('.navbar-collapse').collapse('hide');
          }
      });
    </script>
    
    <div id="wrapper">
      <%= render "layouts/header" %>
        <% if notice %><p id="notice" class="alert alert-warning"><%= notice %></p><% end %>
        <% if alert %><p id="alert" class="alert alert-danger"><%= alert %></p><% end %>
        
        <%= yield %>
        
      <%= render "layouts/footer" %>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
  </body>
</html>

layouts/_header.html.erb

<header class="navbar navbar-expand-lg navbar-light sticky-top">
  <%= link_to "My Gourmet", posts_path, class: "navbar-brand logo" %>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Togglenavigation" id="hamburger">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <!--ユーザーがサインイン状態の場合-->
      <% if user_signed_in? %>
        <li class="nav-item">
          <%= link_to new_post_path, class: "nav-link" do %>
            <i class="fas fa-plus"></i>&ensp;新規投稿
          <% end %>
        </li>
        <li class="nav-item">
          <%= link_to mypage_users_path, class: "nav-link" do %>
            <i class="fas fa-user"></i>&ensp;マイページ
          <% end %>
        </li>
        <li class="nav-item">
          <%= link_to logout_path, class: "nav-link" do %>
            <i class="fas fa-sign-out-alt"></i>&ensp;ログアウト
          <% end %>
        </li>
      <!--ユーザーがサインアウト状態の場合-->
      <% else %>
        <li class="nav-item">
          <%= link_to "新規投稿", login_path, class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "ログイン", login_path, class: "nav-link" %>
        </li>
        <li class="nav-item">
          <%= link_to "新規会員登録", signup_path, class: "nav-link" %>
        </li>
      <% end %>
      
    </ul>
  </div>
</header>