Estoy obteniendo datos de la base de datos con un código PHP. Y lo que quiero es ocultar esos datos y mostrarlos al hacer clic en cada fila de la tabla por sí solo, como cuando se hace clic en una fila en particular que se muestra y la otra se oculta. Tengo un código JavaScript para ocultar y mostrar esos datos, pero el problema es hacer clic en la primera fila de la tabla que funciona y todos los botones afectan solo a la primera fila recuperada. Lo que quiero es que cada fila se muestre al hacer clic y las otras se oculten.

Las dos filas necesarias de la tabla se denominan "nombre" e "info".

codigo PHP

 <?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>"; } ?>

Y código JavaScript:

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

E incluso cuando cambio el div a class y el primer código JavaScript a otro a continuación, el problema sigue con otro comportamiento:

 <script> function myFunction() { var myClasses = document.querySelectorAll('.hide'), i = 0, l = myClasses.length; for (i; i < l; i++) { myClasses[i].style.display = 'block'; } } </script>

Ese segundo código JavaScript oculta y muestra todos los datos que vienen.