I am new to Ruby on Rails and am trying to create a sign up page. I have a minor bug that occurs when a user enters invalid information in the form. I currently redirect them back to the sign up page and render the same page, except now including the error messages. The issue is that on the rerendered page the show password button does not work and the enter password field collapses (see picture 1). I am not understanding why these elements are changing since it is essentially the same page. Here is my html file for the page.

<!-- app/views/registrations/new.html.erb -->

<h1>Sign Up</h1>

<%= form_with model: @user, url: sign_up_path do |form| %>
  <% if @user.errors.any? %>
    <div class="alert alert-danger">
      <p>There were errors with your submission:</p>
      <ul>
        <% @user.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <!-- Email input field -->
  <div class="mb-3">
    <%= form.label :email %>
    <%= form.text_field :email, class: "form-control", placeholder: "Enter your email" %>
  </div>

  <!-- Password input field with a toggle button to show/hide the password -->
  <div class="mb-3">
    <%= form.label :password %>
    <div class="input-group">
      <%= form.password_field :password, class: "form-control password-field", placeholder: "Enter your password", autocomplete: "new-password" %>
      <button type="button" class="btn btn-outline-secondary toggle-password" aria-label="Toggle password visibility">
        <i class="bi bi-eye"></i>
      </button>
    </div>
    <div id="passwordHelpBlock" class="form-text">
      Password must be at least 8 characters long and include at least one uppercase letter, one number, and one special character.
    </div>
  </div>


  <!-- Password confirmation input field -->
  <div class="mb-3">
    <%= form.label :password_confirmation %>
    <%= form.password_field :password_confirmation, class: "form-control", placeholder: "Confirm your password", autocomplete: "new-password" %>
  </div>

  <!-- Submit button -->
  <div class="actions">
    <%= form.submit "Sign Up", class: "btn btn-primary" %>
  </div>
<% end %>

<!-- JavaScript to toggle the visibility of the password field -->
<script>
  document.addEventListener("turbo:load", function() {
    const form = document.querySelector("form");

    form.addEventListener("click", function(event) {
      const togglePasswordButton = event.target.closest(".toggle-password");

      if (togglePasswordButton) {
        const passwordField = togglePasswordButton.closest(".mb-3").querySelector(".password-field");

        if (passwordField) {
          if (passwordField.type === "password") {
            passwordField.type = "text";
            togglePasswordButton.innerHTML = '<i class="bi bi-eye-slash"></i>';
          } else {
            passwordField.type = "password";
            togglePasswordButton.innerHTML = '<i class="bi bi-eye"></i>';
          }
        }
      }
    });
  });
</script>

I am expecting the password field to be the same length as the others and the show password button (left side of password field) to have functionality.