Problema mostrar ocultar detalhes consulta

Olá. Tenho uma tabela onde mostro os DADOS PRINCIPAIS e logo abaixo deles os DADOS SECUNDÁRIOS.

Estou conseguindo mostrá-los normalmente. Porém quando tento criar um script para mostrar/ocultar, é mostrado somente o primeiro valor secundário do primeiro dado principal.

<div id="list" class="row-fluid">
 <table class="table table-striped table-hover" cellspacing="0" cellpadding="0">
 <thead style="color:blue;">
 <tr>
 <th>Título 1</th>
 <th>Título 2</th>
 </tr>
 </thead>

<?php
 $Sql = "SELECT seleciono DADOS PRINCIPAIS";
 while ($linha = @pg_fetch_array($Resultado)) { // While principal
 $id_principal = $linha["id"];
?>

 <tbody>
 <tr>
 <td>DADO PRINCIPAL</td> // MOSTRO OS DADOS PRINCIPAIS E INCLUI 01 BOTÃO PARA MOSTRAR OS DETALHES DE CADA DADO PRINCIPAL
 <td>DADO PRINCIPAL</td>
 <td><button type="button" class="btn btn-warning btn-xs" onclick="mostra('det_modalidade')">Detalhar</button></td> // Botão para mostrar/ocultar
 </tr>

<?php
 $Sql_det = "SELECT ....
FROM minha tabela WHERE id_da_minha_tabela = $id_principal"; AQUI FAÇO A BUSCA DOS DETALHES
 while ($linha = @pg_fetch_array($Resultado_det)) { // While detalhes
 $id_secundario = $linha["id_secundario"];
?>

 // ESSA É A PARTE QUE QUERO MOSTRAR/OCULTAR. SÃO OS DETALHES. PARA CADA DADO PRINCIPAL HÁ OS DETALHES
 <tr id="det_modalidade" style="display:none;">
 <td>DADOS SECUNDÁRIOS</td>
 <td>DADOS SECUNDÁRIOS</td>
 </tr>

 </tbody>

<?php }} // Fecho While principal e secundário ?>

</table>

</div>

<script type="text/JavaScript">
function mostra(id) {
 if (document.getElementById(id).style.display =="none") {
 document.getElementById(id).style.display="block";
 }
 else {
 document.getElementById(id).style.display="none";
 }
}
</script>

Estou há dias tentando. Se alguém puder me auxiliar, agradeço.