Need Javascript to locate individual divs looped by PHP

Question

I managed to create a PHP loop that takes an array and create multiple copies of the same button while the buttons each have their own idenfication ("adiv_1" , "adiv_2", "adiv_3", etc). I have a javascript function that is able to take a single button "before it was called just 'adiv'" and change the text of the button if one clicks on it.

However due to the PHP loop which named it "adiv_1 or adiv_2 or adiv_3", I don't know how to create a javascript function that can take one of the buttons looped with a different identification div tag and get javascript to identify each one if one click on a certain button in that group. Can anyone help?

PHP loop that create the group of buttons

<?php

$array_query = mysql_query("SELECT * FROM person_finder_info");

$i = 0;

while($search_row = mysql_fetch_array($array_query)){
?>
    <p><button type="button" onclick='load()'><div id='adiv_<?php echo $i?>'>Add this person</div></button></p>
<?php
$i++;
}
?>

Javascipt / AJAX function that changes button text (by getting echoed information in PHP file)

//Changes button text to "You added him!"
function load(){                                    
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    } else{
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            document.getElementById("adiv_1").innerHTML =      xmlhttp.responseText;
        }

    }

xmlhttp.open('GET','include.inc.php', true);
xmlhttp.send();

Answer 1

This is rudimentary, but I think you're trying to do something like this, just loop inside of the onreadystatechange function like you did in the other one to display what you want in there to handle all of the buttons.:

<?php
for($i = 0; $i < count($array); $i++) 
{
?>
    <p><button type="button" onclick='load()'><div id='adiv_<?php echo $i;?>'>Add this person</div></button></p>
<?php
}
?>

<script>
//Changes button text to "You added him!"
function load(){                                    
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    } else{
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
    <?php
    echo "var divArray = {";
    for($i = 0; $i < count($array); $i++) 
    {
       echo "'adiv_".$i."'".($i < $count-1 ? "," : "");
    }
    echo "};" /// after the loop this will output like var divArray = {'adiv_1','adiv_2', ... };
    ?> 

    for (var i = 0; i < divArray.length; i++) {                         
        document.getElementById(divArray[i]).innerHtml(dataFromResponse[i]); // assuming you've processed the response from AJAX into an array

    }
  }
}

xmlhttp.open('GET','include.inc.php', true);
xmlhttp.send();
</script>

I can't help you with setting up all of the button innerHTML though since I don't know what kind of response you're getting from AJAX. This is just to lead you in the right direction.