Bootstrap модальное дублирование контента до обновления

Question

С моей домашней страницы I go до страницы регистрации, нажав кнопку «зарегистрироваться», я получу регистрационную форму. Там, если обязательные поля заполнены неправильно, появится модальное окно с перечнем ошибок. Проблема в том, что первая попытка регистрации вызывает модальное состояние так:

Однако, если я обновлю sh страницу, модал работает отлично как и должно быть. Это происходит только при перенаправлении через кнопку регистрации с домашней страницы.

Вот мой код: devise / registrations / new. html .erb

<div class="container">

  <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-content">
          <div class="modal-body">
            <button type="button" class="btn btn-secondary dismiss-close" data-dismiss="modal">Close</button>
          </div>          
        </div>
  </div>

  <div class="center-items-register">
  <%= form_for(resource, as: resource_name, url: registration_path(resource_name), remote: true) do |f| %>
    <%= render "devise/shared/error_messages" %>

      <div class="row 1">
        <div class="column">
          <div class="field">
            <%= f.label :first_name, class: 'required' %><br />
            <%= f.text_field :first_name, class: 'form-control' %>
          </div>
        </div>


        <div class="column">
          <div class="field">
            <%= f.label :last_name, class: 'required' %><br />
            <%= f.text_field :last_name, class: 'form-control' %>
          </div>
        </div>
      </div>


      <div class="row 2">
        <div class="column">
          <div class="field email">
            <%= f.label :email, class: 'required' %><br />
            <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control' %>
          </div>
        </div>
      </div>

      <div class="row 3">
        <div class="column">
          <div class="field">
            <%= f.label :password, class: 'required' %>
            <% if @minimum_password_length %>
            <em>(<%= @minimum_password_length %> characters minimum)</em>
            <% end %>
            <%= f.password_field :password, autocomplete: "new-password", class: 'form-control' %><br />
          </div>
        </div>

          <div class="column">
            <div class="field">
              <%= f.label :password_confirmation, class: 'required' %><br />
              <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'form-control' %>
            </div>
          </div>
        </div>

      <div class="row buttons">
        <div class="column buttons">
          <div class="actions">
            <%= f.submit "Sign up", class: 'btn form margin', data: { toggle: "modal", target: "#myModal" } %>
          </div>
        </div>
    <% end %>

        <div class="column buttons">

          <% if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
            <%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
          <% end %>
          <%= link_to fa_icon("facebook", text: "Sign up with facebook"), user_facebook_omniauth_authorize_path, class: "btn btn-lg btn-social btn-facebook" %>
        </div>
      </div>
    </div>
</div>

Вот devise / registrations / failed_modal. js .erb

var errors = <%= error_messages.to_json.html_safe %>;

var errorForm = document.querySelector('#myModal');
var modalBody = errorForm.querySelector('.modal-body');
var alertElement = document.createElement('div')
alertElement.id = "alertElement";
alertElement.classList.add('alert');
alertElement.classList.add('alert-danger');
modalBody.appendChild(alertElement);
var errList = document.createElement('ul');
alertElement.appendChild(errList)

errors.forEach(function(error) {
var errElement = document.createElement('li');
errElement.innerText = error;
errList.appendChild(errElement)
})

errorForm.style.display = "block"; 

И assets / javascripts / new. js

document.addEventListener("DOMContentLoaded", function() {
var modal = document.getElementById("myModal");
if (!modal) return;

var close = modal.querySelector(".dismiss-close");
var modalBody = modal.querySelector(".modal-body");
var modalContent = modal.querySelector(".modal-content");



window.onclick = function(event) {
  if (event.target == modal) {
    $('#myModal').modal('hide');
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();
    modalBody.removeChild(modalBody.querySelector('#alertElement'));

  }
}

function closeModal() {
    $('#myModal').modal('hide');
  $('body').removeClass('modal-open');
  $('.modal-backdrop').remove();
    modalBody.removeChild(modalBody.querySelector('#alertElement'));


}

modalContent.addEventListener("click", function(event) {
event.stopPropagation();
});

close.addEventListener("click", closeModal);
modal.addEventListener("click", closeModal);

}); 

До того, как у меня возникла проблема, эта кнопка "закрыть" в моем модале исчезла: здесь . Также фон не исчез, поэтому я добавил этот бит jQuery в свой код:

function closeModal() {
    $('#myModal').modal('hide');
    $('body').removeClass('modal-open');
    $('.modal-backdrop').remove();

В консоли я вижу только ошибку, связанную с автозаполнением с помощью «Места Algolia», но это должно даже не быть здесь, так как я на самом деле использую эту функцию автозаполнения на следующей странице. Вот мое приложение. html .erb на всякий случай. Спасибо!

<!DOCTYPE html>
<html>
  <head>
    <title>Neigbornow</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= yield :meta %>
    <%= yield %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
    <%= javascript_pack_tag 'autocomplete' %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= yield :css %>

  </head>
  <body>
    <% if @user.nil? %>
      <%= render 'layouts/header' %>
    <% elsif user_signed_in? && @user.street.nil? %>
      <%= render partial: "layouts/header_address" %>
    <% else %>
      <%= render 'layouts/header_rest' %>
    <% end %>
      <%= render 'layouts/flash' %>
    <div id="main">
    </div>
  </body>
</html>