How do I make the infinite scroll not load the same values again?

Question

I have the following code:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>  
    <script>


      $(document).ready(function() {
        $("#content").scroll(function() { 
          if ($(this).scrollTop() + $(this).height() == $(this).get(0).scrollHeight) {

        var lastID =  $('.carga-mais').attr ('lastID');


            $.ajax({
                type: "POST" ,

                data:{
                  referenciageral: lastID
                },
                 url: "getData.php" ,

                 beforeSend : function() {
                     $('.carga-mais').show();
                },
                success : function (html) {
                     $('.load-more').remove();
                    $('#content').append(html);
                }
            });
          }
        });
      });
    </script>

And a table that shows some data:

<table >
  <br>
  <br>
    <thead class ="headerr">

    </thead>
    <?php

$serverName = "servidor"; 
$connectioninfo = array( "Database"=>"banco", "UID"=>"usuario", "PWD"=>"senha");
  $conn = sqlsrv_connect($serverName, $connectioninfo);




  $query = "select  * FROM lista2 order by cast(referenciageral as int) offset 0 rows fetch next 40 rows only ";






  $output=sqlsrv_query($conn,$query) or die(print_r(sqlsrv_errors()));


     ?>

 <tbody class="oi">

  <?php

    while($fetch = sqlsrv_fetch_array($output)) 
  {

      $postID  =  $fetch["referenciageral"]; 

?>

      <?php echo  '
    <tr id="linha" style="background-color:'.$fetch['cordefundo'].'; color:'.$fetch['cordetexto'].'; ">';?> 


  <div id="list-item" class = "list-item"> <h4> <?php  echo  $fetch['referenciageral']; ?> </h4> </div>

<?php echo '
       </tr>'; ?> 




<?php
  }

    ?>
    <div  class = "carga-mais"  lastID ="<?php  echo  $postID ;  ?> " style = "display: none;">
    </tbody>

</table>

And in the getData file that is the url of my ajax request I have the code :

<?php 
 require  'dbConfig.php' ; 

  // echo $_POST["referenciageral"]; 


?>

<?php 
if (!empty($_POST["referenciageral"])) { 

// Incluir arquivo de configuração do banco de dados 
require  'dbConfig.php' ; 

// Obtém o último ID 
$lastID  =  $_POST["referenciageral"];//$_POST['referenciageral']; 

// Limite na exibição de dados 
$showLimit  =  40 ; 

// Obtém todas as linhas exceto já exibidas 
$queryAll  = "SELECT COUNT (*) as num_rows FROM lista2  WHERE referenciageral>".$lastID." " ; 
$rowAll  =  sqlsrv_query($conn,$queryAll); 
 while($fetch = sqlsrv_fetch_array($rowAll)) {
    $allNumRows = $fetch['num_rows'];

 }

// Obtém linhas por limite, exceto as já exibidas 
$query  =  "SELECT * FROM lista2 ORDER BY cast(referenciageral as int) offset ".$lastID." rows fetch next ".$showLimit." rows only" ; 
$output = sqlsrv_query($conn,$query);
if ( $allNumRows  > 0) { 
    while ($linha  =  sqlsrv_fetch_array($output)) {  
        $postID  =  $linha["referenciageral"];

         ?> 

<div  class = "list-item" > <h4> <?php  echo  $linha['referenciageral']; ?> </H4> </div>
 <?php  }  ?> 
<?php  if ( $allNumRows  >  $showLimit ) {  ?> 
    <div  class = "load-more"  lastID = " <?php  echo  $postID ;  ?> "  style = " display: nenhum; " >
        <img  src = "icones/Loading_icon.gif" />
    </div>
 <?php  } else {  ?> 
    <div  class = "carga-mais"  lastID = "<?php  echo  $postID ;  ?>" >

    </div>
 <?php  } 
}  
} 
?>

He loads the 40 items, then makes the ajax request and loads from 41 to 80 but then when I arrive at the end of the page he makes the ajax request again and returns to show the numbers 41 to 80 again instead of showing from 81 to 120, since I put a limit of 40 in 40 lines.