[ruby on rails]edit.html.erbファイルに、JavaScriptが反映されない。

ruby on railsにて、edit.html.erbファイルに、JavaScriptが反映されないという状況で困っております。
下記内容で不足している点など、ご教示いただけますと幸いでございます。
ご確認のほどよろしくお願いいたします。

●状況
・掲示板サイトを作成しています。
・JavaScriptを使用して、from内が未入力だった際に、submitボタンを押すとエラーメッセージ（アラート）が出るという仕組みを作りたいです。index.html.erbの方はできたのですが、edit.html.erbの方ができません。

●試したこと
・下記の通り、index.html.erbファイルとedit.html.erbファイルに同じコードを書いているのですが、
edit.html.erbの方のファイルでJavaScriptが反映しません。。（form内が空の時にアラートが出ない。）
・hmhrpractices.scss内の、「.hidden{display: none;}」を削除しましたが、その場合はindex.html.erbとedit.html.erbの両方に、エラーメッセージの文が出たままになりました。

「index.html.erb」

    <div id="mask" class="hidden"></div>
    <div id="modal" class="hidden">
          
            <%= form_with model: @hmhrpractice, local: true do |f| %>
              <div>
                <label>名前</label>
                <%= f.text_field :name, class: "form-control", id: "js-name" %>
                <p id='js-name-error' class="hidden">名前を入力してください。</p>
              </div>
              
              <div>
                <label>タイトル</label>
                <%= f.text_field :title, class: "form-control",id: "js-title" %>
                <p id='js-title-error' class="hidden">タイトルを入力してください。</p>
              </div>
              
              <div>
                <label>内容</label>
                <%= f.text_area :content, class: "form-control",id: "js-content" %>
                <p id='js-content-error' class="hidden">投稿内容を入力してください。</p>
              </div>
              
              <div>
                <%= f.submit "投稿内容を確認する", class: "btn btn-primary", id: "submit",'data-disable-with' => false %>
              </div>
            <% end %>
        
      <div id="close">
        閉じる
      </div>
    </div>

    <%= javascript_include_tag 'application' %>

「edit.html.erb」

<div>
  <h2>投稿を編集する</h2>
  <%= form_with model: @hmhrpractice,local: true do |f| %>
    <div class="form-group">
      <label>名前</label>
      <%= f.text_field :name, class: "form-control", id: "js-name" %>
      <p id='js-name-error' class="hidden">名前を入力してください。</p>
    </div>
    <div class="form-group">
      <label>タイトル</label>
      <%= f.text_field :title, class: "form-control", id: "js-title" %>
      <p id='js-title-error' class="hidden">タイトルを入力してください。</p>
    </div>
    <div class="form-group">
      <label>投稿内容</label>
      <%= f.text_area :content, class: "form-control", id: "js-content" %>
      <p id='js-content-error' class="hidden">投稿内容を入力してください。</p>
    </div>
    <div class="form-group">
      <%= f.submit "投稿内容を確認する", class: "btn btn-primary", id: "submit",'data-disable-with' => false %>
    </div>
    <% end %>
    
</div>
<%= javascript_include_tag 'application' %>

「application.js」

{
const $open=document.getElementById('open');
const $close=document.getElementById('close');
const $modal=document.getElementById('modal');
const $mask=document.getElementById('mask');
const $submit=document.getElementById('submit');

    
$open.addEventListener('click', () => {
    $modal.classList.remove('hidden');
    $mask.classList.remove('hidden');
});

$close.addEventListener('click', () => {
    $modal.classList.add('hidden');
    $mask.classList.add('hidden');
});

$mask.addEventListener('click', () => {
    $close.click();
});

$submit.addEventListener('click', () => {
    if(document.getElementById('js-name').value==''){
        document.getElementById('js-name-error').classList.remove('hidden');
    }
});

$submit.addEventListener('click', () => {
    if(document.getElementById('js-title').value==''){
        document.getElementById('js-title-error').classList.remove('hidden');
    }
});

$submit.addEventListener('click', () => {
    if(document.getElementById('js-content').value==''){
        document.getElementById('js-content-error').classList.remove('hidden');
    }
});


  }

「hmhrpractices.scss」

body {
  font-size: 14px;
}

#open, #close {
  cursor: pointer;
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  padding: 1px 0;
  margin: 0 auto;
}

#mask {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

#modal {
  background: #fff;
  width: 300px;
  padding: 20px;
  border-radius: 4px;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: 0.4s;
  z-index: 2;
}

#modal p {
  margin: 0 0 20px;
}

#mask.hidden {
  display: none;
}

#modal.hidden {
  transform: translate(0, -500px);
}

.form-control {
    display: block;
    width: 100%;
}

.post-button {
    display: inline-block;
    float: right;
    font-size: .7rem;
    background-color: #faf6f6;
    color: black;
}

.hidden{
  display: none;
}

#js-name-error,#js-title-error,#js-content-error {
  color: red;
}

#modal p {
  margin: 0;
}