jQueryが動かなかった原因について（初歩的なミス)

現在bootstrapで作成中のWebサイトにjQueryを使用して動きをつけようとした時に
jQueryが動かず、四苦八苦したので備忘録のために記録を残して起きます。
（高度な内容ではありません。初心者が陥った初歩的なミスの記載です。過度な期待はしないでください。）

○今作っているサイト

福祉のマッチングサービスになります。（詳細は割愛）
こちらのサイトにjQeryを入れたいと思いました。
○テスト用のjQeryを入れてみる

index.html

  <p class="title">jqueryのテスト</p>
  <button type="button" id="btn1">jQueryで表示</button>
  <button type="button" id="btn2">表示をかくす</button>
  <div id="TextArea">
    <p>こんにちは！</p>
    <p>jQueryを使って表示しています。</p>
  </div>

application.js

$(function () {
  // 初期表示で隠しておく
  $("#TextArea").hide();
  $("#btn1").on("click", function () {
    $("#TextArea").show();
  });
  $("#btn2").on("click", function () {
    $("#TextArea").hide();
  });
});

表示ボタンを押したらテキストが表示して、隠すボタンを押したら消えるという簡単な内容のものです。

○今回起こったこと○
各ボタンを押しても何も動かない

試したこと①　bootstrapの初期状態のスリム版jQueryをフル版にしてみる
bootstrapを使用する時に初期状態で書かれているjQueryはスリム版の一部の必要な機能だけを使えるようにしたものである。これを公式ホームページからフル版を持ってきて貼り付けてみました。
https://code.jquery.com/の uncompressedというところにあります

index.html

○変更前
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
○変更後
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

結果：変わらず

試したこと②　別のJSファイルを作成してみる
現在apllication.jsには通常使用しているjsの命令も記載されています。
それがいけないかと思い「jquery.js」とう別のファイルを作成して分けて記載してみました。
結果：動いた

試したこと③　jQeryの命令文をファイルの頭にのってくる
②でjQueryの命令文が問題がないことがわかったので、もしかしたら他のJSの命令文が
悪さをしているんじゃないかと思いapllication.jsの1番上にjQuerの命令文を持ってきました。
結果：動いた

○最終的な原因○
コンソールでみたらJSのエラーが出ており、処理が途中で止まっていました。

エラーが出ているところはindex.htmlでは使用しない利用者の生年月日をプルダウンで選ぶための処理でした。
その下以降にJqueryの分を入れると動かなくなります。
index.htmlでは使わないからエラーが出てしまってもいいんだhahahaha
と思っていましたが、大きな間違いでした。

○解決方法○
エラーが出ている生年月日の処理を使用するページのみで読み込むようにする
今回の件で一部のページにしか使わない処理は、まとめたファイルに書かないで個別に書くということを学びました。