复制按钮不读取第二个值

Question

I want to make the copy button copy the value of user, but the problem is the button copied only the value of first user. When move to second user, it remain copied the valued of the first user. Here are my code.

<?php
    require_once('connection.php');
    $sql = "SELECT ftname, menu, longlan FROM 
    ownerinfo";
    $result = $con->query($sql);

    if ($result) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
            $a=1;
            $long[$a]=$row["longlan"];

            echo "Food Truck: " . $row["ftname"]. " 
            <br>Menu: " . $row["menu"].  " 
            <br>Longitude Latitude: <input id='he ' 
            value='".$long[$a]."'></input><button 
            onclick='myFunction()'>Copy</button><br>
                                <a 
            href='https://maps.google.com/'>Maps</a> 
            <hr>";

            $a=$a+1;
        }          
    } else {
        echo "0 results";
    } 
?>

<script>
  function myFunction() {
  var copyText = document.getElementById("he");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
  }

Answer 1

Considering your loop outputs an ID, your JavaScript will only ever be able to target the first instance of that ID (as multiple IDs are considered invalid markup).

To correct this, output classes from your PHP instead:

<input class='he' value='".$long[$a]."'>

And loop over each of the classes in your JavaScript:

const copyText = document.getElementsByClassName("he");
for (let i = 0; i < copyText.length; i++) {
  copyText[i].select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText[i].value);
}