Quiero hacer una tabla expandible como esta tabla expandible llena con un script PHP. Ahora no funciona después de agregar la declaración if en hidden.foreach(). ¿Sabes por qué no funciona y cómo solucionar este problema?

 echo "<table><thead><th>Product</th><th>Expenses</th><th>Group</th><th>Show more</th></thead>"; while($row=$show_costs->fetch_assoc()) { $show_more_costs=$conn->query("SELECT `name`,`describtion`,`cost`,`b_date`,`group` FROM `costs` WHERE `pId`='".$row['pId']."'"); echo "<tr><td>".$row['pId']."</td><td>".$row['costs']."</td><td>".$$row['group']."</td><td><span id='show_more'>▼</span></td></tr>"; //Detailed costs which i want to expand after clicking this while($row_md=$show_more_costs->fetch_assoc()) { echo "<tr class='hidden'><td>".$row_md['name']."</td><td>".$row_md['describtion']."</td><td>".$row_md['cost']."</td><td>".$row_md['b_date']."</td><td>".$row_md['group']."</td></tr>"; } } echo "</table>";

//Este es mi código JS:

 show_more=document.querySelectorAll('#show_more'); hidden=document.querySelectorAll('.hidden'); show_more.forEach(show_more =>{ show_more.addEventListener('click',event=>{ hidden.forEach(hidden=>{ if(hidden.style.display==='none') { hidden.style.display='table-row'; } if(hidden.style.display==='table-row') { h1.style.display='none'; } }) }) })

¿Qué tengo que arreglar?