如何将值从数据库传递到php中的弹出窗口？

Question

I'm working on my final project and developing a web app with using PHP, HTML and Jquery. I have some records in my database , at first I display summary of each record in divs in the main page. At second,when user clicks the Detail button in the main page, I want to create popups which has main page as background. I could create popups with using Javascript and Jquery but I could not pass the id of each record to Details button or popup divs. Here is a part of my code:

<?php $count = 0; ?>
     <div class="container">
        <div class="col-md-9 join-info">
            <div id="timeline">
<?php
$campaigns = $campaign_arr;
for($i=0;$i<count($campaigns);$i++){
$aid1 = $campaigns[$i]; 
?>              <a name="camps"></a>
                <div class="timeline-item" >   


                    <div>
                        <div class="baslik">
                                <h2> <?php echo $aid1["aid_name"]; ?> </h2>
                                <section class="fave"></section>
                            </div>

                        <div class="aid_details">
                            <p>
                                <?php echo $aid1["aid_comment"]; ?>
                            </p>
                        </div>
                                                <div class="bottom">
                        </div>
<?php 
$item = new Items();
$item->openDB();
$items = $item->getItemsByAidID($aid1["id"]);
for($j=0;$j<count($items);$j++){
    $it = $items[$j];
?>
<div class="rates">
                             <p> <?php echo $it["item_name"]; ?> </p>
                             <div class="progress">
                                <div class="progress-bar progress-bar-danger" style=<?php echo "width:" . $it["fill_rate"] . "%"; ?> ></div>
                             </div><p> eksik: <?php echo $it["needed"]; echo "
"; ?> &nbsp karşılanan: <?php echo $it["provided"]; ?> </p>
                        </div>
                        <?php } $item->closeDB();  ?>

                        <div class="col-md-3 join-link">
                            <a data-js="open" class="btn">Show Details >></a>

                        </div>

                    </div>
                </div>
                <?php $count++; } ?>
            </div> 

        </div>
     </div>
<!-- end of embedding campaigns-->
</main> <!-- cd-main-content --> <!-- in filter.php page -->
            </div> 

        </div>
</div>
 <div class="container">
        <div class="col-md-9 join-info">
            <div id="timeline">
<div class="popup">

    <div class="timeline-item">
    <div class="timeline-content">

                        <div class="aid_details">

                            <!-- I have failed this point -->
                        </div>

<button name="close">Back</button>
<button name="Katıl">Close!</button>
                    </div>
                </div>
                </div><!--popup -->
<!----></div></div></div>

I display every record in database in different divs in the main page and these divs have a Show Details button. The problem is that I could not pass the aid_id value of every record to popup.Is there anyone to help?Sorry about my english and I'm kind of beginner in PHP. There is the javascript part to create popups:

function popupOpenClose(popup) {

    /* Add div inside popup for layout if one doesn't exist */
    if ($(".wrapper").length == 0){
        $(popup).wrapInner("<div class='wrapper' ></div>");

    }

    /* Open popup */
    $(popup).show();


    /* Close popup if user clicks on background */
    $(popup).click(function(e) {
        if ( e.target == this ) {
            if ($(popup).is(':visible')) {
                $(popup).hide();
            }
        }
    });

    /* Close popup and remove errors if user clicks on cancel or close buttons */
    $(popup).find("button[name=close]").on("click", function() {
        if ($(".formElementError").is(':visible')) {
            $(".formElementError").remove();
        }
        $(popup).hide();
    });
}

$(document).ready(function () {
    $("[data-js=open]").on("click", function() {
        popupOpenClose($(".popup"));
    });
});

Answer 1

A simple way to do this would be to create a hidden div for each item found in your query and give it a unique id based on the item id.

<div id='hidden_details_<?php echo $the_item_id; ?>' class='hidden_class'>
    put the details here
</div>

I would then use jQuery to open each of the hidden divs when their specific details button was clicked.

Be advised this would only be an effective load if you don't have a lot of items. If you have more than (just a guess here) 10 or 20 items, I would look for a different solution to avoid a huge page load.