Multiple pages in single popup

I am new to web development and I am working on a small project but got stuck in this problem, I simply want to create a popup menu that has multiple pages like when the user clicks on the Next button (in the popup menu) after submitting all the details the next menu will be shown and on the next menu there will be 2 buttons prev, next and similarly for other pages and all this thing would be in the single popup menu.

I tried a lot but I don't know how to do this and I also didn't find any useful stuff or a similar query on the internet so it will be very helpful for me if anyone solves my problem.

Edit

#popup{
    background-color: white;
    display: flex;
    position: fixed;
    width: 800px;
    height: 500px;
    left:50%;
    top:50%;
    padding: 20px;
    flex-direction: row;
    transform: translate(-50%,-50%);
    box-shadow: 0 5px 30px rgba(0,0,0,0.5);
    border: solid 1.5px rgb(34, 34, 255);
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}


#popup >#popup1 > h1{
    font-family: "Mark Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    text-align: center;
    margin-top: -20px;
    transform: translate(18%,0);
    width: 600px;
}

#popup >#popup1> #close_butt {
    display: flex;
    justify-content: flex-end;
}

#popup >#popup1> #close_butt > button{
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    width: 30px;
    height: 30px;
    color: black;
    font-weight: bolder;
    font-family: "Mark Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#popup >#popup1> #close_butt  > button:hover{
    background-color: rgb(71, 71, 252);
    color: white;
}

#popup.active{
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
}

#popup >#popup1> .inner{
    display: flex;
    justify-content: center;
    flex-direction: row;
    height: 400px;
}

#popup >#popup1> .inner > .image1{
    border-radius: 25px;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 50px;
}

#popup >#popup1> .inner > .image2{
    border-radius: 25px;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 50px;
}

#popup >#popup1> .inner > .image1:hover{
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

#popup >#popup1> .inner > .image2:hover{
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

#popup >#popup1> .inner > .image1 > img{
    width: 200px;
    height: 150px;
}

#popup >#popup1> .inner > .image2 > img{
    width: 200px;
    height: 150px;
    margin-top: -65px;
}

#popup >#popup1> .inner > .image1 > p{
    font-family: "Mark Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 22px;
    font-weight: 450;
}

#popup >#popup1> .inner > .image2 > p{
    transform: translate(0,35px);
    font-family: "Mark Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 22px;
    font-weight: 450;

}

#popup >#popup1> .next{
    display: flex;
    justify-content: center;
}

#popup>#popup1>.next > button{
    background-color: rgb(75, 75, 255);
    border: none;
    cursor: pointer;
    border-radius: 30px;
    height: 50px;
    width: 80px;
    color: white;
    font-weight: bolder;
    font-family: "Mark Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#popup > #popup1.active{
    transform:translateX(-200px);
}

#popup > #popup2{
    width: 800px;
    height: 500px;
    transform:translateX(100px);
    background-color: aqua;
}

Thanks.