popups with different content?

i've been trying to get my popups to show different content upon clicking for this commissioned theme on tumblr but can't get anything to work with my existing code . i'm stuck and frustrated, so any guidance would be so wonderful.

<!-- begin popup -->

     <div class="musename">first<br><b>last</b></div> 
     
     <div class="musebio">muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls muse bio goes here it scrolls
     </div>
     
     <div class="musestatsbox">
         <div class="musestats">
         <B>face claim :</B> here<br>
         <b>age :</b> here<br>
         <B> gender :</B> here<br>
         <B>sexuality :</B> here<br>
         <b>sign :</b> here <br>
         <B>aesthetics : </B> here
         </div>
         
         
     </div>
  </div>

    .popup {
    position:relative;
    display: inline-block;
    overflow:visible;

}

.popup .popuptext {
    visibility: hidden;
    background-color: transparent;
    color: {color:text};
    text-align: justify;
    border-radius: 5px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    width:200px;
    left:0px ;
    margin:auto;
    overflow:visible;
 
}

.popupcontent {
    position:absolute;
    height:235px;
    background-color:{color:container};
    width:225px;
    left:0px;
    border-radius:5px;
}



.musename {
    position:absolute;
    font-family:summer;
    font-size: 6vw;
    width:100px;
    left:20px;
    top:25px;
    line-height:25px;
    z-index:1;
    
}


.musename b {
    font-family:abril fatface;
    position:absolute;
    font-size: 2vw;
    z-index:-1;
}

.musestatsbox {
    position:absolute;
    height:120px;
    overflow:scroll;
    left:120px;
    width:95px;
    top:98px;
}

.musestats b {
    font-size:11px;
    
}

.musebio {
    position:absolute;
    line-height:10px;
    overflow:scroll;
    height:120px;
    width:90px;
    left:20px;
    top:100px;
}

.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

this is the script i've been using, it's java and i know it's probably not the correct one to be using.

<script>

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

</script>