非同期通信での表示ができない

実現したいこと

プログラミング初学者です。今回メモ機能を搭載したいと思いそれをbootstrap-rubygemを参考に(https://github.com/twbs/bootstrap-rubygem)非同期通信での表示を考えています。
しかし、エラー表示がなく、反応もしません。どうしたものかと模索しております。

該当のソースコード

app/views/posts/index.html.erb

　　　　　　　　　　　　　　　　　　　<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
            memo
          </button>
          <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">memo</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <%= form_for @post, remote: true do |f| %>
                  <div class="modal-body">
                    <div class="form-group">
                      <%= f.label :title, "title"%>
                      <%= f.text_field :title, class: "form-control" %>
                    </div>
                    <div class="form-group">
                      <%= f.label :text, "contens"%>
                      <%= f.text_field :text, class: "form-control" %>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <%= f.submit "memo", class: "btn btn-primary" %>
                  </div>
                <% end %>
              </div>
            </div>
          </div>

app/stylesheets/application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 @import "bootstrap";

app/javascript/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

//= require jquery3
//= require popper
//= require bootstrap-sprockets
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

/* Please ❤ this if you like it! */

試したこと

index.html.erbのfooter下に<script type="text/javascript" src="application.js"></script>を記述してみましたが、検証ツールのコンソールにGET http://localhost:3000/application.js net::ERR_ABORTED 404 (Not Found)とエラー文が記載されます。今回htmlに記述した内容が出てくると思うのでjavascriptファイルは関係ないと思うのですが、、、やはり、環境設定が間違えているのでしょうか？
情報不足、不備がありましたら、ご指摘いただけると幸いです。
恐れ入りますが、ご教授お願い申し上げます。