Show and Hide Table Lines

Question

There is in the code the button displays/hidden, referenced a Javascript function, however, the button only works by bringing the last record of the bank, never the record referring to the row that it is and only displays after the first row of the table.

For example, even if I click the button that is referencing the 4th record, it displays the <div> at the bottom of the first row of table results, as I do so that the $row['chave'] stay below each row according to their order in the table and only display or hide according to the action on the button, follows below code;

foreach($result as $row) {

$database = date_create($row['expira']);
$datadehoje = date_create();
$resultado = date_diff($database, $datadehoje);
$intervalo = date_interval_format($resultado, '%a');

if($intervalo > 5){
    $classe = "";
}else if($intervalo <= 2){
    $classe = "color-alert";
}else if($intervalo > 2 && $intervalo <=5){
    $classe ="color-warn";
}


//echo $datab;
// echo $datac;
echo '<tr class="'.$classe.'">';

echo '<td ><center>'.$row['cliente'].'</center></td>';
echo '<td ><center>'.$row['cnpj'].'</center></td>';
echo '<td ><center>'.$row['registro'].'</center></td>';
echo '<td ><center>'.$row['versao'].'</center></td>';
echo '<td ><center>'.$row['expira'].'</center></td>';
echo '<td><center> '
. '<a class="btn btn-primary" href="editar.php?id='.$row['id'].'">'
        . '<i class="fas fa-edit"></i> Editar</a>    </td>';
echo'<td><button id="btnExibeOculta" class="btn" onclick="ocultarExibi();">'
. 'Exibir/Ocultar</button></td>';
echo'</tr>';
echo'<tr>    
    <td>
    <div id="dvConteudo" style="display:none;" >'.$row['chave'].'</div>
    </td>
    </tr>';
}

Javascript code:

<script>

    var visibilidade = true;
    function ocultarExibir() { 
        if (visibilidade) {
            document.getElementById("dvConteudo").style.display = "none";
            visibilidade = false;
        } else {
            document.getElementById("dvConteudo").style.display = "block";
            visibilidade = true;
            }
    }
</script>

Answer 1

Let’s see if I can help:

You forgot the 'r' in the call of the hidden Javascript function:

echo'<td><button id="btnExibeOculta" class="btn" onclick="ocultarExibi();">'

Well, if you want to display $Row['key'] as soon as the loading code changes display:None; for display:block; in:

<div id="dvConteudo" style="display:none;" >'.$row['chave'].'</div>

Change your Javascript code to:

<script>

  function ocultarExibir() { 

      var visibilidade = document.getElementById("dvConteudo").style.display;

      if ( visibilidade == "none") {
        document.getElementById("dvConteudo").style.display = "block";
      } else {
        document.getElementById("dvConteudo").style.display = "none";
      }

  }

</script>