Как сделать что бы было больше одного поп апа на одной странице

settings = {
    //Model Popup
    objModalPopupBtn: ".modalButton",
    objModalCloseBtn: ".overlay, .closeBtn",
    objModalDataAttr: "data-popup"
}  
  $(settings.objModalPopupBtn).bind("click", function () {
        if ($(this).attr(settings.objModalDataAttr)) {

            var strDataPopupName = $(this).attr(settings.objModalDataAttr);

            
            //Fade In Modal Pop Up
            $(".overlay, #" + strDataPopupName).fadeIn();

        }
    });

    //On clicking the modal background
    $(settings.objModalCloseBtn).bind("click", function () {
        $(".modal").fadeOut();
    });

@charset "utf-8";
/* CSS Document */
html, body {width: 100%;height: 100%;}
html , body , h1 , h2 , h3 , h4 , h5 , p , header, nav, article, section, aside, figure, figcaption, footer {margin:0px;padding:0px;}
header, article, section, aside, figure, figcaption, footer {display:block} 

body {
  background: #fdf3e7;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;  
}

header {
  background: #3B3738;
  color: #fdf3e7;
  padding: 20px;
  text-align: center;
}

/*
////////////
//Team Page Popup
////////////
*/

section.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 998;
}
section.modalWindow {
    display: none;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999 !important;
    width: 300px;
    min-height: 100px;
    background: #FFF;
    cursor: default;
}
section.modal.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 997;
    cursor: pointer;
}
section.modalWindow section.modalWrapper {
    margin: 30px;
    border: 1px solid #DADADA;
    padding: 15px;
    text-align: left;
    line-height: 20px !important;
  height: 300px;
}
.closeBtn {
    position: absolute;
    right: 10px;
    top: 6px;
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <h1>Modal Popup</h1>
</header>
<a href="#" class="modalButton" data-popup="popupOne">Model Popup</a>

<section class="modal modalWindow" id="popupOne">  
    <section class="modalWrapper">
        <h2>Modal Popup </h2>
        <p></p>
        
    </section>
    <a class="closeBtn">CLOSE X</a>
</section>
<section class="modal overlay"></div>