Css – Hidden class only working on one of the two sections that I'm trying to toggle

I am working on a frontend mentor challenge creating a newsletter sign up page. I wrapped the sign up page and the success message in separate divs inside a main tag, a .hidden class, and created a function to toggle the hidden class when the subscribe button is clicked on the sign up page, and when the dismiss button is clicked on the success page after a user signs up.
My issue is that the toggle is only working for the success message; the message appears if the user signs up successfully and closes when the user clicks the dismiss button, but the sign up portion stays visible the whole time.

<div class="signup-pg" id="signup-page">
      <div class="col col-img">
        <picture class="layout-img">
          <source srcset="./assets/images/illustration-sign-up-desktop.svg" media="(min-width: 770px)">
          <img src="./assets/images/illustration-sign-up-mobile.svg" alt="">
        </picture>
      </div>
      <div class="col col-content">
  
        <h1>Stay updated!</h1>
        <p class="lead">
          Join 60,000+ product managers receiving monthly updates on:
        </p>
        <ul role="list">
          <li>
            <span class="list-icon"><img src="./assets/images/icon-list.svg" alt=""></span>
            <p class="list-item">
            Product discovery and building what matters
            </p>
          </li>
          <li>
            <span class="list-icon"><img src="./assets/images/icon-list.svg" alt=""></span>
            <p class="list-item">
              Measuring to ensure updates are a success
            </p>
          </li>
          <li>
            <span class="list-icon"><img src="./assets/images/icon-list.svg" alt=""></span>
            <p class="list-item">
              And much more!
            </p>
          </li>
        </ul>
      
      <!-- Sign-up form start -->
      <form action="/success.html" id="signup-form">
        <fieldset>
          <legend>Email address</legend>
          <label for="mail">
            <input class="email-input" type="email" id="email" name="usermail" placeholder="[email protected]" required>
            <p class="error-message hidden">Valid email required</p>
            <button class="btn" type="submit" id="submitBtn" >Subscribe to monthly newsletter</button>
            
          </label>
        </fieldset>
      </form>
    </div>
  </div>

.hidden {
  display: none;
}

const signupForm = document.getElementById('signup-form');
const userEmail = document.getElementById('user-email');
const signUpPage = document.getElementById('signup-page');
const successPage = document.getElementById('success-pg');
const dismiss = document.getElementById('dismiss')

function updateSuccessMsg(email) {
    userEmail.textContent = email;
}

function toggleMainAndSuccess() {
    signUpPage.classList.toggle('hidden');
    successPage.classList.toggle('hidden');
}

function isValidEntry(str) {
    const reg = new RegExp('[a-z0-9]+@[a-z]+.[a-z]{2,3}');
    return reg.test(str);
  }

function showErrors() {
    const errorMsg = document.getElementById('error-message');
    const input = document.getElementById('email');
    errorMsg.classList.remove('hidden');
    input.classList.add('error');
}

signupForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const email = signupForm.querySelector('#email')
    const valid = isValidEntry(email.value);
    if (!valid) {
        return showErrors();
    }
    else if (valid) {
        updateSuccessMsg(email.value);
        toggleMainAndSuccess();
    }
});

dismiss.addEventListener('click', () => {
    toggleMainAndSuccess();
    updateSuccessMsg('');
})

My initial thought was that I made a typo in my class name, so the javascript wasn’t applied the way I intended it to. But then I checked the developer tools, and when I click the subscribe button the class hidden shows up on the div that I want hidden, but the user can still see it.