index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multiple Popups With Single Code Block Of JS</title>
    <link rel="stylesheet" href="styles.css">
    
</head>
<body>
  <!--  All Buttons  -->
	<div class="btn-ctnr">
        <button class="open-popup" data-popup="popup1">Open Popup 01</button>
        <button class="open-popup" data-popup="popup2">Open Popup 02</button>
        <button class="open-popup" data-popup="popup3">Open Popup 03</button><br>
        <button class="open-popup" data-popup="popup4">Open Popup 04</button>
        <button class="open-popup" data-popup="popup5">Open Popup 05</button>
        <button class="open-popup" data-popup="popup6">Open Popup 06</button><br>
        <button class="open-popup" data-popup="popup7">Open Popup 07</button>
        <button class="open-popup" data-popup="popup8">Open Popup 08</button>
        <button class="open-popup" data-popup="popup9">Open Popup 09</button><br>
        <button class="open-popup" data-popup="popup10">Open Popup 10</button>
        <button class="open-popup" data-popup="popup11">Open Popup 11</button>
        <button class="open-popup" data-popup="popup12">Open Popup 12</button>
    </div>

<!--   All popups -->
    <div id="popup1" class="popup">
        <div class="popup-content">
            <span class="close" data-popup="popup1">&times;</span>
            <p>Popup 1 Content</p>
        </div>
    </div>

    <div id="popup2" class="popup">
        <div class="popup-content">
            <span class="close" data-popup="popup2">&times;</span>
            <p>Popup 2 Content</p>
        </div>
    </div>

    <div id="popup3" class="popup">
        <div class="popup-content">
            <span class="close" data-popup="popup3">&times;</span>
            <p>Popup 3 Content</p>
            <p>Other content</p>
            <p>Other content</p>
            <p>Other content</p>
            <p>Other content</p>
            <p>Other content</p>
        </div>
    </div>

    <div id="popup4" class="popup">
        <div class="popup-content">
            <span class="close" data-popup="popup4">&times;</span>
            <p>Popup 4 Content</p>
        </div>
    </div>

    <div id="popup5" class="popup">
        <div class="popup-content">
            <span class="close" data-popup="popup5">&times;</span>
            <p>Popup 5 Content</p>
        </div>
    </div>

    <div id="popup6" class="popup">
        <div class="popup-content">
            <span class="close" data-popup="popup6">&times;</span>
            <p>Popup 6 Content</p>
        </div>
    </div>

    <div id="popup7" class="popup">
        <div class="popup-content">
            <span class="close" data-popup="popup7">&times;</span>
            <p>Popup 7 Content</p>
        </div>
    </div>

    <div id="popup8" class="popup">
        <div class="popup-content">
            <span class="close" data-popup="popup8">&times;</span>
            <p>Popup 8 Content</p>
        </div>
    </div>

    <div id="popup9" class="popup">
        <div class="popup-content">
            <span class="close" data-popup="popup9">&times;</span>
            <p>Popup 9 Content</p>
        </div>
    </div>

    <div id="popup10" class="popup">
        <div class="popup-content">
            <span class="close" data-popup="popup10">&times;</span>
            <p>Popup 10 Content</p>
        </div>
    </div>

    <div id="popup11" class="popup">
        <div class="popup-content">
            <span class="close" data-popup="popup11">&times;</span>
            <p>Popup 11 Content</p>
        </div>
    </div>

    <div id="popup12" class="popup">
        <div class="popup-content">
            <span class="close" data-popup="popup12">&times;</span>
            <p>Popup 12 Content</p>
        </div>
    </div>

    <script src="script.js"></script>

</body>
</html>