Repeating Popup IDs

Question

I am pulling data from MySQL database and displaying user posted content on the page. A UserPost consists of data from 2 tables, UserTable and PostTable.

When querying from both tables I have the correct information displayed until I click the edit button. Then the queried data inside the popup always matches the first element of the query. I believe this is because the popup has an ID. I tried using PHP data to have multiple buttons with different IDs but I am still getting the same popup content correlating with the first queried data. I have highlighted the lines in question with "<-- PROBLEM HERE**********************************" Thank you.

PHP Function Calling All User Posts

function homePosts($conn) {
        $UserID = $_SESSION['UserID'];
        $userPostSQL = "SELECT * FROM PostTable WHERE UserID = ? AND SectionID = 1 ORDER BY Date DESC";
        $userPostSTMT = $conn->prepare($userPostSQL);
        $userPostSTMT->bind_param("s", $UserID);
        $userPostSTMT->execute();
        $userPostRESULT = $userPostSTMT->get_result();

        if (mysqli_num_rows($userPostRESULT) != 0) {
            // User Posts Exist
            while ($userPostROW = $userPostRESULT->fetch_assoc()) {

                $userInfoSQL = "SELECT UserName, ProfilePicture FROM UserTable WHERE UserID = ?";
                $userInfoSTMT = $conn->prepare($userInfoSQL);
                $userInfoSTMT->bind_param("s", $UserID);
                $userInfoSTMT->execute();
                $userInfoRESULT = $userInfoSTMT->get_result();
                
                if (mysqli_num_rows($userInfoRESULT) != 0) {
                    // User Info Exists
                    while ($userInfoROW = $userInfoRESULT->fetch_assoc()) {

                        $Date = $userPostROW['Date'];
                        $Text = $userPostROW['Text'];
                        $PostID = $userPostROW['PostID'];
                        $UserName = $userInfoROW['UserName'];
                        $ProfilePicture = $userInfoROW['ProfilePicture'];

                        echo '
                            <div class="popup" id="popup-'.$PostID.'">    <-- PROBLEM HERE $PostID remains the same throughout the loop**********************************
                                <div class="overlay"></div>
                                <div class="content">
                                    <div class="close-btn" onclick="togglePopup()">&times;</div>
                                    <h1>Edit Post</h1>
                                    <p>'.$Text.'</p>
                                    <p>This Post ID keeps the value of the first loop iteration'.$PostID.'</p>
                                </div>
                            </div>
                            <div class="postBox">
                                <img class="postprofilepicture" src="../profilepictures/'.$ProfilePicture.'">
                                <p class="postusername">'.$UserName.'<p>
                                <p class="posttime">'.date('M jS, Y h:ia',strtotime($Date)).'<p>
                                <p>'.$Text.'</p>
                                <p>This Post ID Changes through for every new row'.$PostID.'<p>
                                <br>
                                <div class="dropdown">
                                    <button onclick="myFunction(this)" class="dropbtn">···</button>
                                    <div Id="myDropdown" class="dropdown-content">                                        
                                        <a href="#View">View</a>
                                        <a href="#Like">Like</a>
                                        <a href="#Save">Save</a>
                                        <a href="../editpost">Edit</a>
                                        <button onclick="togglePopup()">Popup</button>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <script>
                                function togglePopup(){
                                    document.getElementById("popup-'.$PostID.'").classList.toggle("active");    <-- PROBLEM HERE $PostID remains the same throughout the loop**********************************
                                }
                                function myFunction(e) {
                                    e.parentNode.querySelector(".dropdown-content").classList.toggle("show")
                                }

                                window.onclick = function(event) {
                                    if (!event.target.matches(".dropbtn")) {
                                        var dropdowns = document.getElementsByClassName("dropdown-content");
                                        var i;
                                        for (i = 0; i < dropdowns.length; i++) {
                                            var openDropdown = dropdowns[i];
                                            if (openDropdown.classList.contains("show")) {
                                                openDropdown.classList.remove("show");
                                            }
                                        }
                                    }
                                }
                            </script>
                        ';
                    }
                }
            }
        }
        $userPostSTMT->free_result();
        $userPostSTMT->close();
        $userInfoSTMT->free_result();
        $userInfoSTMT->close();
    }

Answer 1

I needed to create a $Count variable that would assign a number for each post instead of using a random postid. I could then call element by classname using the count number to call an array of all the divs with a specific class name.

$Count = 0;

<div class="popup" class="popup">
                                <div class="overlay"></div>
                                <div class="content">
                                    <div class="close-btn" onclick="togglePopup('.$PopCount.')">&times;</div>
                                    <h1>Edit Post</h1>
                                    <p>'.$Text.'</p>
                                    <p>This Post ID keeps the value of the first loop iteration'.$PostID.'</p>
                                </div>
                            </div>
                            <div class="postBox">
                                <img class="postprofilepicture" src="../profilepictures/'.$ProfilePicture.'">
                                <p class="postusername">'.$UserName.'<p>
                                <p class="posttime">'.date('M jS, Y h:ia',strtotime($Date)).'<p>
                                <p>'.$Text.'</p>
                                <p>This Post ID Changes through for every new row'.$PostID.'<p>
                                <br>
                                <div class="dropdown">
                                    <button onclick="myFunction(this)" class="dropbtn">···</button>
                                    <div Id="myDropdown" class="dropdown-content">                                        
                                        <a href="#View">View</a>
                                        <a href="#Like">Like</a>
                                        <a href="#Show">Show</a>
                                        <a href="../editpost">Edit</a>
                                        <button onclick="togglePopup('.$PopCount.')">Popup</button>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <script>
                                function togglePopup(PopCount){
                                    document.getElementsByClassName("popup")[PopCount].classList.toggle("active");
                                }
                                function myFunction(e) {
                                    e.parentNode.querySelector(".dropdown-content").classList.toggle("show")
                                }

                                window.onclick = function(event) {
                                    if (!event.target.matches(".dropbtn")) {
                                        var dropdowns = document.getElementsByClassName("dropdown-content");
                                        var i;
                                        for (i = 0; i < dropdowns.length; i++) {
                                            var openDropdown = dropdowns[i];
                                            if (openDropdown.classList.contains("show")) {
                                                openDropdown.classList.remove("show");
                                            }
                                        }
                                    }
                                }
                            </script>
                        ';
                        $PopCount++;