¿Cómo puedo paginar el contenido de un tab-content?

Tengo un tab-content en el index y en el tab-pane se muestran los productos, sólo 6 productos por “página”, pero no logro hacer que el paginador funcione de manera correcta, la idea es que carguen los productos siguientes de ese tab al hacer click en el paginador y así con cada tab. Este es el código hasta ahora…

<div class="tab-pane fade clearfix" id="v-pills-artwork" role="tabpanel" aria-labelledby="v-pills-artwork-tab">                 <h4 class="m-4 ">Art Work</h4>                 <?php                 $  max=6;                 $  pag=0;                 if(isset($  _GET[pag]) && $  _GET[pag] <>""){                     $  pag=$  _GET[pag];                     }                 $  inicio=$  pag * $  max;                 $  query="SELECT * FROM products WHERE category= 'ART WORK' ORDER BY date DESC ";                 $  query_limit= $  query ." LIMIT $  inicio,$  max";                 $  resource = $  conn->query($  query_limit);                 if (isset($  _GET[total])) {                     $  total = $  _GET[total];                     } else {                     $  resource_total = $  conn -> query($  query);                     $  total = $  resource_total->num_rows;                     }                 $  total_pag = ceil($  total/$  max)-1;                 ?>                 <?php if($  total){?>                 <?php while ($  row = $  resource->fetch_assoc()){?>                  <div class="card col-sm-4 float-left m-2">                     <img src="images/products/<?php echo $  row[productcode]?>.JPG" alt="<?php echo $  row[product]?>" class="img-fluid rounded card-img-top">                 <div class="card-body">                     <h6 class="card-text"><strong><a href="product-2.php?id=<?php echo $  row[id]?>"><?php echo $  row[product]?></a></strong></h6> <br> <p align="center"><strong>Price: $  <?php echo number_format($  row[price]);?></strong></p>                 </div>                 </div>                  <?php }?>                 <?php  }else{?>                     <p class="error"> Results not found.</p>                 <?php }?>                 <div class="col-sm-12 d-flex justify-content-center">                 <div class="pagination-div">                          <ul class="pager">                             <?php if($  pag-1 >= 0){?>                             <li>                                 <a href="index.php?pag=<?php echo $  pag -1?>&total=<?php echo $  total?>"> < </a>                             </li>                             <?php }?>                             <li> <?php echo ($  inicio + 1) ?> to <?php echo min($  inicio + $  max, $  total) ?> of <?php echo $  total ?> </li>                             <?php if($  pag +1 <= $  total_pag ){?>                             <li>                                 <a href="index.php?pag=<?php echo $  pag +1?>&total=<?php echo $  total?>"> > </a>                             </li>                             <?php }?>                         </ul>                 </div>                 </div>             </div>  

Funciona si está directo en el index, pero dentro del tab no funciona, no se cómo tendría que hacerlo para que se devuelva solo a esa parte de la página y no al index, he probado enviandolo al id del div pero tampoco me resultó. Espero me entiendan y puedan ayudarme, gracias!