My pop up modals are showing the same info when clicked, and the blur is covering the pop up boxes

Question

I've been searching and can't figure out the answer, so I am hoping someone can help. I am creating multiple pop up boxes that will display different info and when it pops up the screen behind will blur. My issue is that all of the pop up boxes are showing one element of information and forgetting the rest. Along with that problem is the blur of the screen is also covering the pop up box, I've tried z-index and a couple other things but I am still lost. I'll share a snippit of my code and my repo for the full picture if need be. I left out the CSS for the 2nd pop up box because it is the same setup. (I'm working with just the 2 until I figure out the problem)

https://github.com/CheyenneTech/Digital-Resume

<main class="grid-container" id="blur">




<article class="grid-item grid-item-3 tech-skills">
        <button class="pop-up-box-btn" href="#" onclick="toggle()">⁺</button>
        <h1>Technical Skills</h1>
</article>

<div class="skill-popup" id="skills-pop-up-box">
    <h2>skills</h2>
    <p>some more stuff</p>
    <a href="#" onclick="toggle()">Close</a>
</div>

<article class="grid-item grid-item-4 professional-experience">
    <button class="pop-up-box-btn" href="#" onclick="toggle()">⁺</button>
    <h1>Professional Experience</h1>
</article>
<div class="experience-popup" id="experience-pop-up-box">
    <h2>experience</h2>
    <p>some more stuff</p>
    <a href="#" onclick="toggle()">Close</a>
</div>


.grid-container#blur.active {
    filter: blur(20px);
    z-index: 1;
}

/* pop up boxes */

#skills-pop-up-box {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    padding: 50px;
    box-shadow: 0px 3px 6px 0.5px rgba(62, 66, 66, 0.286);
    background: #fff;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    z-index: 100;
    
}

#skills-pop-up-box.active {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    top: 50%;
    z-index: 100;
}



 function toggle(){
    let blur = document.getElementById('blur');
    blur.classList.toggle('active');
    let skillPopUp = document.getElementById('skills-pop-up-box');
    skillPopUp.classList.toggle('active');
    let experiencePopUp = document.getElementById('experience-pop-up-box');
    experiencePopUp.classList.toggle('active');

}

Answer 1

For the first question about all pop up boxes showing the same content that's because you add event to all of your buttons with the same function toggle that's good but when this runs and reaches the toggle function it will do the same things as follows (read the comments)

    let blur = document.getElementById('blur');
    blur.classList.toggle('active');
    let skillPopUp = document.getElementById('skills-pop-up-box');
    skillPopUp.classList.toggle('active'); // firstly this will be active
    let experiencePopUp = document.getElementById('experience-pop-up-box');
    experiencePopUp.classList.toggle('active'); // lastly every time whatever you click this will run so every time the experience popup is the one that will be shown

So the solution is

1. In your html you can pass the id to the toggle function as the following

<article class="grid-item grid-item-3 tech-skills">
            <button class="pop-up-box-btn" href="#" onclick="toggle('skills-pop-up-box')">⁺</button>
            <h1>Technical Skills</h1>
    </article>

    <div class="skill-popup" id="skills-pop-up-box">
        <h2>skills</h2>
        <p>some more stuff</p>
        <a href="#" onclick="toggle('skills-pop-up-box')">Close</a>
    </div>

You should do the same for all other cards.
2. In your javascript, use the passed id to add/remove the active class to it

function toggle(id){
    const blur = document.getElementById('blur');
    blur.classList.toggle('active');

    const currentPopUp = document.getElementById(id);
    currentPopUp.classList.toggle('active');
}

---

For the second question I would firstly remove this css code section

.grid-container#blur.active {
  /* */
}

and in the html I would add a new div for an overlay just firstly inside the body before the main tag as follows:

<body>
    <div class="overlay"></div>
    <main class="grid-container" id="blur">

and in javascript modify the toggle function by adding the last 2 lines:

function toggle(id){
    const blur = document.getElementById('blur');
    blur.classList.toggle('active');

    const currentPopUp = document.getElementById(id);
    currentPopUp.classList.toggle('active');

    const overlay = document.querySelector('.overlay');
    overlay.classList.toggle('active');
}

and in css add these lines

.overlay {
  background-color: black; /* whatever color */
  opacity: 40%; /* whatever percent, Note you can use hexa or rgba color instead */
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}
.overlay.active {
  display: block;
}