View products 4 by 4 after button click see more

Question

Initially I want to bring 4 products from an array and I would like to display 4 more after clicking the button see more. In the code below I bring them all at once.

current code below:

<?php echo $header; 
if(isset($mfilter_json)) {
    if(!empty($mfilter_json)) { 
        echo '<div id="mfilter-json" style="display:none">' . base64_encode( $mfilter_json ) . '</div>'; 
    } 
}

$theme_options = $registry->get('theme_options');
$config = $registry->get('config'); 
$background_status = false; ?>

<?php 
function limitarTexto($texto, $limite){
  $contador = strlen($texto);
  if ( $contador >= $limite ) {      
      $texto = substr($texto, 0, strrpos(substr($texto, 0, $limite), ' ')) . '...';
      return $texto;
  }
  else{
    return $texto;
  }
} ?>

<style>
.center {
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
}
</style>

<!-- Page Content -->
<div class="container">

    <!-- Page Heading -->
    <div class="row">
        <div class="col-lg-12">
            <h2 class="page-header">
                <i class="fa fa-user" aria-hidden="true"></i> Perfil do Vendedor: <small>
                    <?php echo ($partner['screenname']); ?>
                </small>
            </h2>
        </div>
    </div>
    <!-- /.row -->

    <!-- Title -->
    <div class="row">
        <div class="col-lg-12">
            <h3>Produtos</h3>
        </div>
    </div>
    <!-- /.row -->

    <!-- Page Features -->
    <div class="row text-center">
        <?php foreach($products as $produto){ ?>
        <div class="col-md-3 col-sm-6 hero-feature">
            <div class="thumbnail">
                <img src="image/<?php echo ($produto['image']); ?>" alt="">
                <div class="caption">
                    <div class="name" title="<?php echo $produto['name']; ?>">
                        <?php echo(limitarTexto($produto['name'], $limite = 20)); ?>
                    </div>
                    <br>
                    <div class="price">
                        <span class="price-old"><strong>R$ <?php echo ($produto['seller_price']); ?></strong></span>
                    </div>
                    <br>
                    <p>
                        <?php echo (limitarTexto($produto['description'], $limite = 50)); ?>
                    </p>
                    <p>
                        <a
                            href=""
                            class="btn btn-primary">Comprar</a>
                    </p>
                </div>
            </div>
            <br>
        </div>
        <?php } ?>
        <br>
        <div class="center">
            <button type="button" class="btn btn-primary btn-lg">
                <span class="fa fa-caret-square-o-down" aria-hidden="true"></span>
                Ver mais...
            </button>
        </div>
    </div>
    <!-- /.row -->

</div>
<br>
<br>
<br>


<?php echo $footer; ?>

Answer 1

    <?php 
  $post = $pdo->query("SELECT * FROM postagens")->fetchAll();
if(!$post){
  print_r($pdo->errorInfo());
} 
foreach ($post as $posts){
?>

JS

$.ajax({
       url:'postagens.php', //Página PHP que seleciona postagens
       type:'POST', // método post, GET ...
       data: 'limit=5&offset=0', //seus paramêtros
       success: function(data){ // sucesso de retorno executar função
         $('#conteudo').append(data); // adiciona o resultado na div #conteudo
       } // fim success
    }); // fim ajax