Whenever the id is different create a new complete loop

Question

I have a query that has several lines with the same id. Here is an example of what it returns:

Id	valor em divida	Descrição
552	50.00	Fraldas
552	35.00	Creme
545	23.00	Caneta
545	15.00	Caderno

Now I'm looping in js to return the data like this:

var data = [
   {Id: "552", valor:  "50.00", Descricao: "Fraldas", },
   {Id: "552", valor: "35.00", Descricao: "Creme", },
   {Id: "545", valor: "23.00", Descricao: "Caneta", },
   {Id: "545",  valor: "15.00", Descricao: "Caderno",  },
];

$(document).on('click', '.dad-pagamento', function(){
var linha = ``;
  
  linha += `<div>
              Assunto: Aviso de pagamento
              
              <table class="align-middle mb-0 table table-borderless table-striped table-hover">
              
              <thead>
                <tr>
                  <th class="text-center">Nº Recibo</th>
                  <th class="text-center">Data de Vencimento</th>
                  <th class="text-center">Valor</th>
                </tr>
               </thead>                              
               <tbody>`;               
               Object.keys(data).forEach(i=>{ 
               
               Id = data[i].Id;
               valor = data[i].valor;
               Descricao = data[i].Descricao;
       linha += `<tr>
                   <td class="text-center text-muted"> ${Id}</td>
                   <td class="text-center text-muted"> ${valor}</td>
                   <td class="text-center text-muted"> ${Descricao}</td>
                 </tr>`;
               })
    linha += ` </tbody>
             </table>
             
             De V. Exas.
             Atenciosamente 
           </div>`;
          $('#minhaDiv3').show();
          $(".pagmfalta").html(linha);     
});

$(function() {
  $(".btn-show").click(function(e) {
    e.preventDefault();
    el = $(this).data('element');
    $(el).show();
    $("section > div").not(el).hide();
  });
});

$(function() {
  $(".btn-hide").click(function(e) {
    e.preventDefault();
    el = $(this).data('element');
    $(el).hide();
  });
});

function mostra(div){    
  $(".esconder > div").hide();
$('.' + div).show();    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" tabindex="0" class="dropdown-item btn-show dad-pagamento" href="s3" data-element="#minhaDiv3">Teste</button>

<section id="s3">
   <div style="display:none" id="minhaDiv3">
      <div class="row pagmfalta">

      </div>
   </div>
</section>

But I intended that whenever the Id was different, it would separate in this way:

Assunto: Aviso de pagamento
Nº Recibo   Data de Vencimento  Valor
552 50.00   Fraldas
552 35.00   Creme
De V. Exas. Atenciosamente

Assunto: Aviso de pagamento
Nº Recibo   Data de Vencimento  Valor
545 23.00   Caneta
545 15.00   Caderno
De V. Exas. Atenciosamente

If you notice the code above it returns all the information even though the Id is different at once.

Answer 1

You need to group first and then forEach the result like:

var data = [{
    Id: "552",
    valor: "50.00",
    Descricao: "Fraldas",
  },
  {
    Id: "552",
    valor: "35.00",
    Descricao: "Creme",
  },
  {
    Id: "545",
    valor: "23.00",
    Descricao: "Caneta",
  },
  {
    Id: "545",
    valor: "15.00",
    Descricao: "Caderno",
  },
];
var results = data.reduce(function(results, org) {
  (results[org.Id] = results[org.Id] || []).push(org);
  return results;
}, {});
$(document).on('click', '.dad-pagamento', function() {
  var linha = ``;
  Object.keys(results).forEach(i => {
    linha += `<div>
              Assunto: Aviso de pagamento
              
              <table class="align-middle mb-0 table table-borderless table-striped table-hover" border="1">
              
              <thead>
                <tr>
                  <th class="text-center">Nº Recibo</th>
                  <th class="text-center">Data de Vencimento</th>
                  <th class="text-center">Valor</th>
                </tr>
               </thead>                              
               <tbody>`;
    Object.keys(results[i]).forEach(b => {

      Id = results[i][b].Id;
      valor = results[i][b].valor;
      Descricao = results[i][b].Descricao;
      linha += `<tr>
                   <td class="text-center text-muted"> ${Id}</td>
                   <td class="text-center text-muted"> ${valor}</td>
                   <td class="text-center text-muted"> ${Descricao}</td>
                 </tr>`;
    })
    linha += ` </tbody>
             </table>
             
             De V. Exas.
             Atenciosamente 
           </div>`;
  });
  $('#minhaDiv3').show();
  $(".pagmfalta").html(linha);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" tabindex="0" class="dropdown-item btn-show dad-pagamento" href="s3" data-element="#minhaDiv3">Teste</button>

<section id="s3">
  <div style="display:none" id="minhaDiv3">
    <div class="row pagmfalta">

    </div>
  </div>
</section>