how to show value from hidden box when button onclick in php loop

i trying to build shop simple site for learning but i got stuck when i click button. when i click it nothing happen. it should showing text from value on hidden button when i click button.

below is my php code

$i=1;
                         while($rows = mysqli_fetch_assoc($varresultP)){
                           echo "<button type='button' class='btn btn-outline-primary' onclick='myFunction()' >".$rows['var_name']."</button>";
                           echo "<input type='hidden'  name='price' value=".$rows['price']." id='price{$i}'>";
                           echo "<input type='hidden' value=".$rows['id']." id='id{$i}'>";
                           echo "<input type='hidden' value=".$rows['quantity']." id='quantity{$i}'>";
                            
                            $i++;
                         }

the result is multiple button appear but nothing happen when i click button. total button is based from database how many data have.

below is my jsquery

function myFunction() {
  for(var i=1; i<5; i++){
  var x = document.getElementById("price"+i).value;
  document.getElementById("sendPrice").innerHTML = x;

  var x = document.getElementById("id"+i).value;
  document.getElementById("idDiv").innerHTML = x;

  var x = document.getElementById("quantity"+i).value;
  document.getElementById("showQuantity").innerHTML = x;
  }
}

value from id(price) that i want show on div id(sendPrice), value from id(id) that i need to show in href button, value from id(quantity) that i need it will appear on div id(showQuantity) when button is onclick.

below is html code

    <div class ='row' style='padding: 30px; width: 100px;'><p>USD: <label class='p2--semi-bold c-red' id='sendPrice'></p></label></div>
<div class ='row' style='padding: 30px; width: 100px;'><p>Productid: <label id='idDiv'></p></label></div>
<div class ='row' style='padding: 30px; width: 100px;'><p>Quantity: <label id='showQuantity'></p></label></div>

Answer

First add {$i} to your onclick='myFunction()' like onclick='myFunction({$i})'

second in your javascript remove the for loop and add i to function myFunction() { like function myFunction(i) {

Demo

function myFunction(i) {
  var x = document.getElementById("price" + i).value;
  document.getElementById("sendPrice").innerHTML = x;

  var x = document.getElementById("id" + i).value;
  document.getElementById("idDiv").innerHTML = x;

  var x = document.getElementById("quantity" + i).value;
  document.getElementById("showQuantity").innerHTML = x;
}

<button type='button' class='btn btn-outline-primary' onclick='myFunction(1)'>".$rows['var_name']."</button>
<input type='hidden' name='price' value=".$rows['price']. ROW1" id='price1'>
<input type='hidden' value=".$rows['id']. ROW1" id='id1'>
<input type='hidden' value=".$rows['quantity']. ROW1" id='quantity1'>";

<button type='button' class='btn btn-outline-primary' onclick='myFunction(2)'>".$rows['var_name']."</button>
<input type='hidden' name='price' value=".$rows['price']. ROW2" id='price2'>
<input type='hidden' value=".$rows['id']. ROW2" id='id2'>
<input type='hidden' value=".$rows['quantity']. ROW2" id='quantity2'>";



<div id="sendPrice"></div>
<div id="idDiv"></div>
<div id="showQuantity"></div>