How do I select data from two mysql tables, display the data from the first table and use a popover to show data from the second table

Question

I have two tables: users and results. I want to display the results of individual users and include a bootstrap popover which shows information about the corresponding user.

This is the code I've written:

    //Query the database
    $stmt = $db->prepare("SELECT * FROM results JOIN users ON results.result_user_id = users.user_id");

    $stmt->execute();

    $res = $stmt->get_result();

    if($res -> num_rows > 0){

        echo '<h3 class="text-center">Your Results</h3>
            <div class="row">';

        while($row = $res->fetch_object()){

            //Display results and user info
            echo '<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                    <div class="result-card">';

                    echo '<a class="popover-item" data-toggle="popover" data-container="body" 
                        type="button" data-html="true" data-placement="bottom" href="javascript:void()">User Info</a>';

                        echo '<div id="popover-content-login" class="hide col-lg-2 col-md-2">

                                <ul class="list-group">

                                    <li class="list-group-item h5">'.$row->fname.' '.$row->lname.'</li>

                                    <li class="list-group-item"><p>Email: '.$row->email.'</p></li>

                                    <li class="list-group-item">

                                        <a href="'.$row->website.'" target="_blank">Website</a>

                                    </li>

                                    <li class="list-group-item">Address: '.$row->city.', '.$row->country.'</li>

                                </ul>

                            </div>';

                        echo '<div class="col-lg-4 col-md-4 card">';

                        echo '<h2 title="'.$row->course_title.'">Course Title: '.$row->course_title.'</h2>';

                        echo '<h5>Course Code: '.$row->course_code.'</h5>';

                        echo '<h5>Credit Hours: '.$row->course_code.'</h5>';

                        echo '<div>Description: '.$row->course_desc.'</div>';

                        echo '<p>Result: '.$row->result.'</p>';

                       echo    " </div>";

                      echo   " </div>;
        }


}

This is my problem

When I run this code, it only displays information about the first user to register (ie, the first user with id #1 in the database) on the results of all users.

But I want each user's information to be shown on his own results when you click the ' User Info ' link, not one person's information to be showing on all users' results.

I have tried searching for solution on the Internet but couldn't get any help anywhere. Your help will be much appreciated. Thanks

Answer 1

As pointed out by @user3473534, All the popovers had an id of popover-content-login . I had to change that line to the code below to fix the problem:

echo '<div id="popover-content-login'.$row->id.'" class="hide col-lg-2 col-md-2">