How can I get this pop up box to display the value of the div clicked?

Question

I have a search box that you type in a name and a list of matching names come up using ajax. I also have a div that pop ups alongside the names that when clicked, another div pops up showing the name of the person the div is matched with inside of it.

Here is my code:

PHP:

<?php
    require 'core.inc.php';
    require 'connect.inc.php';

if (!empty($_GET['letter'])) {
    $letter = $_GET['letter'];

    $query = "SELECT `first name`, `last name` FROM `users` WHERE `first name` LIKE '".$letter."%'";
    $query_run = mysql_query($query);

    while ($query_row = mysql_fetch_assoc($query_run)) {
        $first_name = $query_row['first name'];
        $last_name = $query_row['last name'];

        echo $first_name;
        echo " ".$last_name;    
?>
    <div id="popup" onclick="popup();"><input type="hidden" id="friend_name" name="friend_name" value="<?php print "$first_name"; print "$last_name"; ?>"></div> 
<?php
        }
    }
?> 

All of this works, it gets all the names and lists them out. Im setting the input value equal to the first name and last name so I can get it in javascript.

Javascript:

function popup() {
    var popupBox = document.createElement("div");
    popupBox.id = "popupBox";
    popupBox.innerHTML = document.getElementById('friend_name').value;
    popupboxHolder.appendChild(popupBox);
}; 

This works fine if only one name shows up, but if two names show up and I click on the second div the name of the first person shows up in the pop up box not the name of the second person.

Answer 1

you have multiple divs with same id because of the while loop. try using it with a class name.

<div class="popup" onclick="popup();">

Answer 2

document.getElementById returns the first element on the page with the id given.

the onclick function is given the context of the currently clicked element.

this == the currently clicked popup div

you code should look like this

function popup() {
    var popupBox = document.createElement("div");
    popupBox.id = "popupBox";
    popupBox.innerHTML = this.getElementsByTagName('input')[0].value;
    popupboxHolder.appendChild(popupBox);
}; 

Answer 3

You can pass the element to the function using Javascript this to avoid all these hassles:

<div class="popup" onclick="popup(this);">....</div>

Then you can access the clicked element from your function

function popup(clickedelement) {
    var popupBox = document.createElement("div");
    popupBox.id = "popupBox";
    popupBox.innerHTML = clickedelement.getElementsByTagName('input')[0].value;
    popupboxHolder.appendChild(popupBox);
};