Load more button data show with ajax in php.

index.php =>

             $rowperpage = 5;
            // counting total number of posts
            $allcount_query = "SELECT count(*) as allcount FROM signup where type='teacher'";
            $allcount_result = mysql_query($allcount_query);
            $allcount_fetch = mysql_fetch_array($allcount_result);
            $allcount = $allcount_fetch['allcount'];

            // select first 5 posts
            $query = "select * from signup where type='teacher' order by id DESC limit 0,$rowperpage ";
            $result = mysql_query($query);

            while($row = mysql_fetch_array($result)){

//your code here...............you want to show .
 
            }
}
            ?>
            <h1 class="load-more button btn">Load More</h1>
            <input type="hidden" id="row" value="0">
            <input type="hidden" id="all" value="<?php echo $allcount; ?>">



.js file =>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  <script type="text/javascript">
$(document).ready(function(){

    // Load more data
    $('.load-more').click(function(){
        var row = Number($('#row').val());
        var allcount = Number($('#all').val());
        var rowperpage = 5;
        row = row + rowperpage;

        if(row <= allcount){
            $("#row").val(row);

            $.ajax({
                url: 'loadmore.php',
                type: 'post',
                data: {row:row},
                beforeSend:function(){
                    $(".load-more").text("Loading...");
                },
                success: function(response){

                    // Setting little delay while displaying new content
                    setTimeout(function() {
                        // appending posts after last post with class="post"
                        $(".post:last").after(response).show().fadeIn("slow");

                        var rowno = row + rowperpage;

                        // checking row value is greater than allcount or not
                        if(rowno > allcount){

                            // Change the text and background
                            $('.load-more').text("No More Result");
                            $('.load-more').css("background","darkorchid");
                        }else{
                            $(".load-more").text("Load more");
                        }
                    }, 2000);


                }
            });
        }else{
            $('.load-more').text("Loading...");

            // Setting little delay while removing contents
            setTimeout(function() {

                // When row is greater than allcount then remove all class='post' element after 3 element
                $('.post:nth-child(5)').nextAll('.post').remove();

                // Reset the value of row
                $("#row").val(0);

                // Change the text and background
                $('.load-more').text("Load more");
                $('.load-more').css("background","#15a9ce");
             
            }, 2000);


        }

    });

});

  </script>


loadmore.php =>

<?php

//include database configuration file
$row = $_POST['row'];
$rowperpage = 5;

// selecting posts
$query = 'SELECT * FROM signup WHERE type="teacher" order by id DESC limit '.$row.','.$rowperpage;
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){ 

your code here after load more data show.


} ?>