Refresh Div's after Database status is changed

I have the following listing:

WhenIupdatependingstatusforpayments:

IwouldlikethevaluesoftheTopPendingandPendingPanelstobeupdatedautomatically,butonlywhenIrefreshthepage:

I'mtryingthisway:

HTML

<divclass="col-lg-6 col-md-6">
  <div class="panel panel-green">
      <div class="panel-heading">
          <div class="row">
              <div class="col-xs-3" style="font-family: Arial; font-size: 30px">
                  <i class="fas fa-dollar-sign fa-2x"></i>
              </div>
              <div class="col-xs-9 text-right">
                  <div class="huge statusPagos" style="font-family: Arial; font-size: 30px">
                   <?php echo $metodos->visualizarPagamentos($status = 'P'); ?>
                  </div>
                  <div style="height: 14px"></div>
                  <div>Pagos</div>
              </div>
          </div>
      </div>
      <a href="<?php echo $caminhoAbsoluto; ?>/sistema/financeiro/?pagos">
          <div class="panel-footer" onclick="window.location.href='<?php echo $caminhoAbsoluto; ?>/sistema/ver-pagos/';" title="Ver pagamentos confirmados">
              <span class="pull-left">Visualizar</span>
              <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
              <div class="clearfix"></div>
          </div>
      </a>
  </div>
</div>
<div class="col-lg-6 col-md-6">
  <div class="panel panel-red">
      <div class="panel-heading">
          <div class="row">
              <div class="col-xs-3" style="font-family: Arial; font-size: 30px">
                  <i class="fas fa-dollar-sign fa-2x"></i>
              </div>
              <div class="col-xs-9 text-right">
                  <div class="huge statusAberto" style="font-family: Arial; font-size: 30px">
                    <?php
                    echo $metodos->visualizarPagamentos($status = 'A');
                    ?>
                  </div>
                  <div style="height: 14px"></div>
                  <div>Pendentes</div>
              </div>
          </div>
      </div>
      <a href="<?php echo $caminhoAbsoluto; ?>/sistema/financeiro/?pendentes">
          <div class="panel-footer" onclick="window.location.href='<?php echo $caminhoAbsoluto; ?>/sistema/ver-pendentes/';" title="Ver pagamentos pendentes">
              <span class="pull-left">Visualizar</span>
              <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
              <div class="clearfix"></div>
          </div>
      </a>
  </div>
</div>

JQuery

<script>
    $(document).on('click',"#btnAlterar", function(){
      var t;
      function temporiza(status){
         t = setTimeout(function(){
         $('.statusAberto').html('<?php echo $metodos->visualizarPagamentos('A'); ?>');
         $('.statusPagos').html('<?php echo $metodos->visualizarPagamentos('P'); ?>');
        },1000);
     }
      var that = this;
      var IdFinanceiro = $(this).attr('data-id');  // pega o id do botão
      $.post('sistema/alterar-status.php', {key: IdFinanceiro}, function(retorno){
      if(retorno == 1){
        $(that).parent('.status').html("<a href='#!' id='btnAlterar' data-id='<?php echo $csClientes->IdFinanceiro; ?>' class='btn btn-success btn-xs'>Pago</a>");
        if (!t) temporiza();
      }if(retorno == 0){
        $(that).parent('.status').html("<a href='#!' id='btnAlterar' data-id='<?php echo $csClientes->IdFinanceiro; ?>' class='btn btn-danger btn-xs'>Pendente</a>");
        if (!t) temporiza();
      }
     });
   });
  </script>

PHP

/**
* Método atualiza os valores dos pagamentos
* Encontra-se na página financeiro.php
* @access public
* @param string $status
* @return string $visualizar
*/
public function visualizarPagamentos($status){
   $sql = mysqli_query($this->conexao,"SELECT *, SUM(ValorTotal) AS ValorTotalPagto FROM cs_financeiro WHERE StatusPagamento = '".mysqli_real_escape_string($this->conexao,$status)."';");
   $csVisualizar = mysqli_fetch_object($sql);
   $pagamentos = ($csVisualizar->ValorTotalPagto == "")?"R$ 0,00":"R$ ".number_format($csVisualizar->ValorTotalPagto,2,',','.');
   return $pagamentos;
}

Updating and changing status is working normally in the listing, but the problem is only in the top Panel's, which do not automatically update the values.