Buttons with dynamic ajax text

In my php page I have a row of buttons which each have some values (5 in this example). These values shall be send into a ajax script which do some calculation to values and return the result for each button without reloading the homepage. In this example the result will be

FRANK=5 (button 1)

FRANK=frank (button 2)

FRANK=48 (button 3)

FRANK=Bo (button 4)

FRANK=test (button 5)

When I press the first button I should see result 1 on the button. When I press the next button I should see result 2 on the button.

I only have one result returned on button 1 since all buttons has the same container for the return value. I need more containers for return values and I could add $i to the container: . This will give me different containers to return the result to. But how can I use $i in the javascript. My problem is also that var x in the javascript always will be the value from the first button. Again I could add $i to the id=”x”: id=”x’.$i.'” but still I only have document.getElementById(“x”).value to read the x value in the javascript.

I hope that somebody help me to finish the code here.

Mainpage:

include('hide-ajax-scripts.php');

$dblinjer=Array();

$dblinjer[0]['loebid']=5;
$dblinjer[1]['loebid']='frank';
$dblinjer[2]['loebid']=48;
$dblinjer[3]['loebid']='Bo';
$dblinjer[4]['loebid']='test';

$i=0;
while($i<5){
    
    $dblinjer[$i]['nrlink']='<div><button type="button" id="x" value="'.$dblinjer[$i]['loebid'].'" onclick=baadimaal("baadimaal")><span id="container"></span></button></div>';
    echo $dblinjer[$i]['nrlink'];
    $i++;
}

hide-ajax-scripts.php contains:

<script type="text/javascript">
function baadimaal(str) {
    var x = document.getElementById("x").value; //henter værdi fra input felt med id = x
//    document.getElementById("para").innerHTML = x; //viser variablen para på pladsholder 
    
    
    
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
        document.getElementById("container").innerHTML =
        this.responseText; //her placeres svaret, som kommer tilbage fra hide-ajax-svar filen
    }
    xhttp.open("GET", "hide-ajax-svar.php?funk=" + str + "&para=" + x); //overfør str og x til hide-ajax-svar filen
    xhttp.send();
}
</script>

hide-ajax-svar.php contains the calculation. Here will come a lot more calculations and storing of values in database.

<?php
if($funk=='baadimaal'){
    echo 'FRANK='.$para;
}
?>

Answer

You can pass this inside your function call where this refer to current button which is clicked .Also , you cannot use same ids for mutliple elements instead use class selector . So, change your php code like below:

$dblinjer[$i]['nrlink']='<div><button type="button" value="'.$dblinjer[$i]['loebid'].'" onclick=baadimaal("baadimaal",this)><span class="container"></span></button></div>';

Then , add this as parameter inside your function and then use el.value to get the button value which is clicked and el.querySelector(".container").innerHTML to add result inside the span tag where button has been clicked. So, change your js code like below :

function baadimaal(str,el) {
    var x = el.value; //henter værdi fra input felt med id = x
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
       el.querySelector(".container").innerHTML =
       this.responseText;
    }
    xhttp.open("GET", "hide-ajax-svar.php?funk=" + str + "&para=" + x);
    xhttp.send();
}