I' am fetching data from database with a PHP code. And what I want is to hide that data and show it on click each row on table on its own, like when click a particular row it shows and the other hide. I have a JavaScript code to hide and show that data but the problem is on click the only the first row of table that is working and all the button affect only the first row fetched. What I want is every row shows on click and the other hides.

The two row needed from table are named "name" and "info".

PHP code

<?php      
        $result = mysqli_query($db,"select * from table");
        
        while($data = mysqli_fetch_array($result)) { 
            
            echo "<button onclick='myFunction()'>";
            echo "<h3>" . $data["name"] ; "</h3>";
            echo "</button>";

            echo "<div id='hide'>";
            echo "<p>" . $data["info"] ; "</p>"; 
            echo "</div>";
            
        }
    ?>

And JavaScript code:

<script>
   function myFunction() {
   var x = document.getElementById("id");
      if (x.style.display === "none") {
          x.style.display = "block";
      } else {
            x.style.display = "none";
      }
   }
</script>

And even when I change the div to class and the first JavaScript code to another one below, the problem still with another behavior:

<script>
   function myFunction() {
    var myClasses = document.querySelectorAll('.hide'),
    i = 0,
    l = myClasses.length;

    for (i; i < l; i++) {
        myClasses[i].style.display = 'block';
    }

  }
</script>

That second JavaScript code hide and show the whole the data coming.