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@company.com" 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.

As you said, the classes is adding but still visible that means the hidden class has less complexity than other selector

.hidden{
display:none !important;
}

> Use !important will override any other selectors

You were missing a success page html in the code. So I added it here. Other than that, the code is working fine. Please check by running it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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) => {
const email = signupForm.querySelector('#email')
const valid = isValidEntry(email.value);
if (!valid) {
e.preventDefault(); // Solution: Prevent submission only if invalid form
return showErrors();
}
});
dismiss.addEventListener('click', () => {
toggleMainAndSuccess();
updateSuccessMsg('');
})

<!-- language: lang-css -->

.hidden {
display: none;
}

<!-- language: lang-html -->

<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@company.com" 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>
<div id="success-pg" class="hidden">
<p> <span id="user-email"></span> This is a success message.</p>
<button id="dismiss">x</button>
</div>

<!-- end snippet -->