I put a static popup for details view but it's not work for dynamic

Question

I put a static popup for details view but it's not work for dynamic. please tell me the solution for this.

these are the screen shots in website popup page, menu when we click on the substation in menu, next page is this when we click on one image then popup like this

Frontend code - substation(folder) - index.php

<section class="about-section about-one p-relative section-padding background-section cus_about_home_edc cus_pb_0">

    <div class="box-info cus_main_titi_sec">
        <div class="container  section-margin cus_mt_0 ">


            <div class="box-under-bottom-img mb-section">

                <div class="p-relative content container cus_inner_pro_color box-padding border-rdu text-center cus_mobile_raml_iiner">
                    <p class="dsn-heading-title mt-20 max-w750 cus_justi"><br><br> The competitive energy market requires powerful technologies and smart approaches for effective integration of power from generation plants, and efficient transmission and distribution to residential, commercial and industrial
                        consumers. High voltage substations are the key node points that ensure a reliable transmission of power across a grid network. Ceylex with comprehensive domain knowledge ensures that substations are designed, erected and commissioned
                        incorporating the most modern technologies from leading manufacturers in the world. Our experienced workforce comprising of professionals from the fields of electrical engineering, mechanical engineering, civil engineering, substation
                        automation systems and substation communication systems backed by the latest testing equipment in the industry enables tailor-made substation solutions with versatile project execution and completion. Our expertise in this domain
                        has made us the largest EPC contractor in Sri Lanka and we have completed complex projects on time rendering no losses to our clients. Our increasing presence globally, enables us to provide you the best possible service at all
                        times


                    </p>
                    <br><br>
                    <div class="dsn-accordion" role="tablist">
                        <h3 class="title-block-lg text-upper">Milestone Projects</h3> <br><br>
                        <div class="accordion__wrapper">
                            <div class="p-relative dsn-style-classic box-image-transform">
                                <div class="root-posts ">
                                    <div class="dsn-posts dsn-post-type-classic h-350 d-grid grid-lg-3 grid-sm-2">

                                        <?php substations(); ?>

                                    </div>


                                </div>

                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    </div>
    </div>

    </div>
    </div>

</section>

Backend code - common_functions.php

function substations(){
    global $conn;
    $qry = "SELECT * FROM projects WHERE type = 'Grid Substation'";
    $res = mysqli_query($conn,$qry);
    while($row = mysqli_fetch_assoc($res)){
        $id= $row['id'];
        $client_name= $row['client_name'];
        $title = $row['title'];
        $type = $row['type'];
        $date = $row['date'];
        $country = $row['country'];
        $description = $row['description'];
        $photo = $row['image'];
        $photo1 = $row['image1'];
        $photo2 = $row['image2'];
        $photo3 = $row['image3'];
        $photo4 = $row['image4'];
        $photo5 = $row['image5'];
        $photo6 = $row['image6'];
        $photo7 = $row['image7'];
        $photo8 = $row['image8'];
        echo 
        "
<div>
    <article class='dsn-item-post grid-item over-hidden p-20 border-style'>
        <div class='box-content d-flex ' class='des' onclick='showPopup()'>
            <img class='sm-title-block tab-title heading-color cus_mal_pop_im' src='../../backend/images/projects/$id/$photo' class='cover-bg-img' alt='' />
        </div>
        <p class='cus_mal_milestone_p'><br><strong>$title</strong></p>
    </article>
    

    <div id='popup' class='popup'>
        <span class='close-btn' onclick='hidePopup()'>&times; </span>
        <div class='cus_mal_popup_img_div'>
            <img class='sm-title-block tab-title heading-color cus_mal_popup_img' src='../../backend/images/projects/$id/$photo' class='cover-bg-img' alt='' />
        </div>
        <div class=' tab-description cus_mal_milestone cus_mal_milestone_p1'>
            <h5><br>$title<br><br></h5>
            <p class='cus_mal_mob_p'>$description<br><br></p>
            <p class='cus_mal_mob_p'>$type<br><br><br><br></p>
            <div class='cul_mal_mob_milestone' style='margin-left: 10vh; text-align: left; '>
                <p class='cus_mal_mob_p'>Accomplishment Date :- $date</p>
                <p class='cus_mal_mob_p'>Country :- $country</p>
                <p class='cus_mal_mob_p'>Client's Name :- $client_name</p>
            </div>
        </div>
    </div>
   
</div>
        ";
    }
}

JS code - custom.js

function showPopup() {
  document.getElementById('popup').style.display = 'block';
}
function hidePopup() {
  document.getElementById('popup').style.display = 'none';
}

function showPopup1() {
  document.getElementById('popup1').style.display = 'block';
}
function hidePopup1() {
  document.getElementById('popup1').style.display = 'none';
}

function showPopup2() {
  document.getElementById('popup2').style.display = 'block';
}
function hidePopup2() {
  document.getElementById('popup2').style.display = 'none';
}

function showPopup3() {
  document.getElementById('popup3').style.display = 'block';
}
function hidePopup3() {
  document.getElementById('popup3').style.display = 'none';
}

I put a static popup for details view but it's not work for dynamic, same image and details popup for all services. please tell me the solution for this.