Return record of each query as I click the button

Question

I have 3 query record in a table of the database of the same user.

When I query returns and shows the most recent query of the database table. I intend to return the 3 queries, always show the most recent query, but have a button that when clicking close the query that is showing and open the previous query and so on until there are no more queries. This way I always have access to the information recorded in each consultation about the user.

At this time I return to consultation as follows:

<a name="view2" id="<?php echo $row["Id"]; ?>" data-toggle="modal" href="#dataModal1" class="btn btn-primary view_data2" />EGA</a>

<div id="dataModal1" class="modal fade" style="width:1000px;">  
      <div class="modal-dialog" style="width:1000px;">  
           <div class="modal-content" style="width:1000px;">  
                <div class="modal-header" style="width:1000px;">  
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
                     <h4 class="modal-title"><strong>Estado Geral e Autonomia</strong></h4>  
                </div> 
                <div class="container"></div>       
                <div class="modal-body" id="employee_detail1">  
                </div> 
                <div class="modal-footer">  
                     <a href="#" class="btn btn-danger" data-dismiss="modal">Sair</a>  
                </div>  
           </div>  
      </div>  
 </div> 

$(document).on('click', '.view_data2', function(){  
           var employee_id1 = $(this).attr("Id");  
           if(employee_id1 != '')  
           {  
                $.ajax({  
                     url:"./select2",  
                     method:"POST",  
                     data:{employee_id1:employee_id1},  
                     success:function(data){  
                     console.log(data);
                          $('#employee_detail1').html(data);  
                          $('#dataModal1').modal('show');  
                     }  
                });  
           } 
         }); 

on the page select2 I have the following code:

if(isset($_POST["employee_id1"]))  
 { 
$output = '';  

$query = "SELECT * FROM centrodb.PsicUtentes WHERE centrodb.PsicUtentes.Id = '".$_POST["employee_id1"]."'"; 
      $result = mysqli_query($conn, $query);  
      $output;  
      while($row = mysqli_fetch_array($result))  
      {
      $output .= '

                    <h4 class="modal-title">Identificação do Utente</h4>  
                    <form method="post" id="insert_form2">
                        <fieldset class="grupo">
                        <table class="campo" cellspacing="10">
                         <tr>
                          <td>                      
                          <label>Data</label>  
                          <input type="text" id="Data1" name="Data" class="form-control" value="'.$row["Data"].'" style="width:150px;" />  
                          </td> 
                          <td>                      
                          <label>Código Utente</label>  
                          <input type="number" id="CodigoUtente1" name="CodigoUtente" value="'.$row["CodigoUtente"].'" class="form-control" style="width:100px;"/>  
                          </td>
                          <td>                        
                          <label>Nome Utente</label>  
                          <input type="text" id="Nome1" name="Nome" value="'.$row["Nome"].'" class="form-control" class="form-control" style="width:400px;"/>   
                          </td>
                          <td>  
                          <label>Data Nascimento</label>  
                          <input type="date" id="DataNasc1" name="DataNasc" value="'.$row["DataNasc"].'" class="form-control" style="width:150px;"/>   
                          </td>
                          </tr>
                        </table>
                        </fieldset>   
                        </form>                  
           ';  
      }  
      $output;  
      echo $output;  
 }   

I will show in the image with the page when I have three queries:

I intended to have a button like the one surrounded by red and whenever I clicked I would close the query information you are showing and open the previous query.

I have this solution:

<script type="text/javascript"> 
$(document).ready(function(){ 

$('.conteudo').hide(); 

$('.exibir').each(function(i){ 
$(this).click(function(){ 
$('.conteudo').each(function(j){ 
if(i == j) $(this).show('slow'); 
}); 
}); 
}); 
$('.ocultar').each(function(i){ 
$(this).click(function(){ 
$('.conteudo').each(function(j){ 
if(i == j) $(this).hide('slow'); 
}); 
}); 
}); 
}); 
</script> 

if(isset($_POST["employee_id1"]))  
 { 
$output = '';  

$query = "SELECT * FROM centrodb.PsicUtentes WHERE centrodb.PsicUtentes.Id = '".$_POST["employee_id1"]."'"; 
      $result = mysqli_query($conn, $query);  
      $output;  
      while($row = mysqli_fetch_array($result))  
      {
      $output .= '

                <h4 class="modal-title">Identificação do Utente</h4>
<div> 
<a class="exibir" href="#">Ver</a>-- 
<a href="#" class="ocultar">Ocultar</a>
</div> 

<div class="conteudo"> 
<form method="post" id="insert_form2">
                        <fieldset class="grupo">
                        <table class="campo" cellspacing="10">
                         <tr>
                          <td>                      
                          <label>Data</label>  
                          <input type="text" id="Data1" name="Data" class="form-control" value="'.$row["Data"].'" style="width:150px;" />  
                          </td> 
                          <td>                      
                          <label>Código Utente</label>  
                          <input type="number" id="CodigoUtente1" name="CodigoUtente" value="'.$row["CodigoUtente"].'" class="form-control" style="width:100px;"/>  
                          </td>
                          <td>                        
                          <label>Nome Utente</label>  
                          <input type="text" id="Nome1" name="Nome" value="'.$row["Nome"].'" class="form-control" class="form-control" style="width:400px;"/>   
                          </td>
                          <td>  
                          <label>Data Nascimento</label>  
                          <input type="date" id="DataNasc1" name="DataNasc" value="'.$row["DataNasc"].'" class="form-control" style="width:150px;"/>   
                          </td>
                          </tr>
                        </table>
                        </fieldset>   
                        </form>    

<div>
';  
      }  
      $output;  
      echo $output;  
 }  

That’s how it works, but I still wanted to make something better. I show the first record, but when I see the second the first always stays open and should hide when I open the second. The second record opens when I click see and hide when I click hide.

The Edit and New button should always appear at the opening start of each div and edit according to the opening div

Answer 1

var i = 0;
 $('#incrementa').click(function(){ 
       
    if (i < 20 ) { 
            i++;
        } else if (i = i++) {
            i = 0;
        }
        document.getElementById("display").innerHTML = i;
 })

 $('#decrementa').click(function(){ 
 
  if (i > 0) {--i;} 
        document.getElementById("display").innerHTML = i;
 })
 
 //basta agora você pegar o contador e diminuir no seu ID

<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
   <div class="texto">
    <label id="display">0</label>
  </div>
  <div class="group-buttons">
    <a class="button-link" id="incrementa" href="#">Aumenta</a>
    <a class="button-link" id="decrementa" href="#">Diminuir</a>
  </div>
 
</body>

Id = Id - i , to previous

Id = Id + i , next

$.ajax({
url:". /Select2",
method:"POST",
data:{employee_id1: Id },
Success:Function(date){
console.log(data); $('#employee_detail1'). html(date);
$('#dataModal1'). modal('show');
}
});