I want to make expandable table like this expandable table filled by PHP script. Now it doesn't work after i added if statement in hidden.foreach(). Do You know why it doesn't work and how to fix this problem ?

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

//This is my JS code:

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';
      }
    })
  })
})

What do I have to fix?