Popup will not reopen after closing

Question

I have a div "button" that opens a popup. When you click on the popup, it runs

function theFunctionAbout() {
    var popup = document.getElementById("thePopupAbout");
    popup.classList.add("show");
    
  }

and it will add show, which is visibility:visible; when you click a button in the popup, it runs

function theFunctionAboutClose(){
    var popup = document.getElementById("thePopupAbout");  
    popup.classList.add("hide");
  }

and it will add hide, which runs display:none;.

After hitting the button, the popup closes, but never opens again. How do i fix this?

I have tried switching add.("hide") to remove.("show"). This works on another popup where the popup window is part of a dive form element, and that popup is reopenable, However, my popup window here has a paragraph element. When i tried to do remove.("show") on my about popup, the button would not close the window.

My button:

<div class="aboutPopup" onclick="theFunctionAbout()">About
        <p class="aboutPopupText" id="thePopupAbout">
            <span class="aboutPopupInfo">
                Mathalassa is a fun and educational math game that offers students from varying ages and grades to learn and perfect their math skills.
            </span>

            <button class="aboutPopupClose" onclick="theFunctionAboutClose()">x</button>
        </p>
    </div>

Another button:

<div class="oldUserPopup" onclick="theFunctionOld()">Old User 
        <form class="oldUserPopupText" id="thePopupOld">
            <label class="oldUserPopupInfo" for="name">Please Enter Your Username:</label>

                <div class="form-grp">
                    <input class="inputNameHere" type="text" name="username" id="user" required minlength="2" maxlength="15" size="10" >
                </div>

                <div class="form-grp">
                    <input class="inputSubmit" type="Submit" name="login-btn" id="user">
                </div>

            <button class="oldUserPopupClose" onclick="theFunctionOldClose()">x</button>

        </form>
    </div>

Answer 1

instead of using two differents fonctions for open/close the popup you can use element.classList.toggle("hide");which will create less problems for the hierarchy of the css of each class

Answer 2

When you are using the add method you're appending a class to existent classes.
let's say you've shown and hidden the element several times your element className string would be as the following:
class="...other_classes show hide show hide show hide"
and you don't want that so replace the two function with the following so when you add hide class you'll remove show and so on...

function theFunctionAbout() {
    var popup = document.getElementById("thePopupAbout");
    popup.classList.remove("hide");
    popup.classList.add("show");
  }

function theFunctionAboutClose(){
    var popup = document.getElementById("thePopupAbout");  
    popup.classList.remove("show")
    popup.classList.add("hide");
  }