Estoy creando una tabla mientras recorro una matriz de API y he encontrado un par de inconvenientes. Aquí está el HTML repetido ->

 $html = " <tr class='mt-2'> <td>{$rank}.</td> <td><img src='{$image}' height='75' width='75'></td> <td>{$name}</td> <td class='bold'>\${$final_worth}B</td> <td class='{$class}'>\${$last_change}</td> <td>{$country}</td> <td>{$source}</td> <td><button class='bg-color-primary text-color-third px-2' id='more_btn' onclick='showDetails({$cnt})'>More</button></td> </tr> <tr > <div id='details'>lorem ipsum wahoo baby</div> </tr> ";

Todo iba como se esperaba hasta que fui a agregar la segunda fila (div#detalles).

En realidad, hay 2 problemas en juego aquí: el primero es cómo conecto cada botón / div # detalles para que el botón 1 solo afecte a div1, etc.

Sin embargo, todavía no puedo abordar eso, porque en este momento, cuando se hace clic en cualquier botón, div # detalles aparece sobre el encabezado de la tabla en lugar de debajo de la fila anterior.

Entonces, hasta que tenga el posicionamiento correcto, realmente no puedo abordar la funcionalidad js. ¿Puede alguien decirme por qué <tr><div#details> no aparece debajo de la fila anterior? El código js es el siguiente ->

 <script> var cnt = <?php echo $cnt; ?>; function showDetails(cnt) { var details = "details"; var x = document.getElementById(details); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script>

Sé que el código es un desastre en este momento. Es un poco vergonzoso jajaja, pero como dije, no puedo hacer más con él hasta que pueda descubrir por qué esa fila de la tabla no está posicionada correctamente.