while ($row = mysqli_fetch_array($result)) + JAVASCRIPT error

Question

I have a problem with some code. The proram allows me to copy from one lick one password that is sought on my BDDMysql. I have a script that allows me to copy the content of the html tag <P> , with a specific ID. All of that i got it inside of a while(mysqli_fetch_array($result)) . So the problem is, when i click for copy one password, only i get the first one of the bdd copied on the clipboard.

<?php

$egest='SELECT * FROM gestion';
$result=mysqli_query($con,$egest);
while ($row = mysqli_fetch_array($result)){
//echo $row['subcat_nombre'];
?>

<script>
    function copyToClipboard(element) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(element).text()).select();
      document.execCommand("copy");
      $temp.remove();
    }
</script>

<table class="estilo-ps">
    <tr>
    <td colspan="3" class="td-tit"><b><?php echo $row['gest_nombre'] ?></b></td>
  </tr>
  <tr class="tr-borders">
    <th class="th-border-cent">Contrasenya</th>
  </tr>
  <tr class="tr-borders">
    <td class="td-border-cent">
        <center>
            <p hidden="hidden" id="p1"><?php echo $row['gest_contra']; ?></p><br>
            <p>clic per copiar la contrasenya</p>
            <img src="img/key.png" class="copy" onclick="copyToClipboard('#p1')"/>
        </center>
    </td>
 </tr>
<?php
}
?>

Answer 1

You can't have duplicate IDs. Use a class instead of an ID. Then use the appropriate DOM selection function to find the element with that class next to the clicked element.

Also, take the function out of the loop, it doesn't need to be redefined for each row.

<script>
    function copyToClipboard(img) {
      var $element = $(img).siblings(".p1");
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($element.text()).select();
      document.execCommand("copy");
      $temp.remove();
    }
</script>

<?php

$egest='SELECT * FROM gestion';
$result=mysqli_query($con,$egest);
while ($row = mysqli_fetch_array($result)){
//echo $row['subcat_nombre'];
?>


<table class="estilo-ps">
    <tr>
    <td colspan="3" class="td-tit"><b><?php echo $row['gest_nombre'] ?></b></td>
  </tr>
  <tr class="tr-borders">
    <th class="th-border-cent">Contrasenya</th>
  </tr>
  <tr class="tr-borders">
    <td class="td-border-cent">
        <center>
            <p hidden="hidden" class="p1"><?php echo $row['gest_contra']; ?></p><br>
            <p>clic per copiar la contrasenya</p>
            <img src="img/key.png" class="copy" onclick="copyToClipboard(this)"/>
        </center>
    </td>
 </tr>
</table>
<?php
}
?>

Answer 2

<?php

$egest='SELECT * FROM gestion';
$result=mysqli_query($con,$egest);
?>

<script>
    function copyToClipboard(element) {
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($(element).text()).select();
      document.execCommand("copy");
      $temp.remove();
    }
</script>

<table class="estilo-ps">
while ($row = mysqli_fetch_array($result)){
//echo $row['subcat_nombre'];
?>
    <tr>
    <td colspan="3" class="td-tit"><b><?php echo $row['gest_nombre'] ?></b></td>
  </tr>
  <tr class="tr-borders">
    <th class="th-border-cent">Contrasenya</th>
  </tr>
  <tr class="tr-borders">
    <td class="td-border-cent">
        <center>
            <p hidden="hidden" id="p1"><?php echo $row['gest_contra']; ?></p><br>
            <p>clic per copiar la contrasenya</p>
            <img src="img/key.png" class="copy" onclick="copyToClipboard('#p1')"/>
        </center>
    </td>
 </tr>
<?php
}
?>
</table>

You are trying to loop the script. Script should be declared only once.
Move your while loop after <table> .