How to create a paginated screen in the Freemarker language

Question

I have a page where the news is displayed and I have below 2 buttons next and previous. The problem is: on click of next button news gets loaded as a continuous list.

I am expected to have the old news getting reloaded with new news on click of next button. Below is my code:

<#assign qlimit = 15>
<#assign cqid = currentObject.foreignId>

<#if params.initialpass>
<section id="single-col-stories">
    <ul style="padding-left: 0px;" >
</#if>

<#list currentObject.children as childId>
        <#if childId?index == 0>
            <#assign currentSection = node(childId).pubInfo.sectionPath>
        </#if>
        <@include object=childId template="list-right-image" />
</#list>

<#if params.initialpass>
    </ul>
</section>

<#if currentObject.children?size gte qlimit>
<div class="load-more" id="load-more-button">
    <a class="btn-on-white white" id="lmb-${cqid}">Next</a>
</div>
<div class="previous" id="previous-button">
    <a class="btn-on-white-test whitetest" id="lmb-${cqid}test">Prev</a>
</div>
</#if>

    <script>

        $( document ).ready(function() {

                var pageNumber = 1;
                var limit = ${qlimit:8};
                var loadButtonClicked = false;
                var previousButtonClicked = false;

                function loadMoreFunc() {
                    if(loadButtonClicked==false){
                        loadButtonClicked=true;
                        var sectionQueryUrl = "/query/section?";
                        var urlPath = window.location.pathname;
                        if (urlPath.indexOf("/news/")==0){
                            var squery = {
                                "param.section": "/news/*",
                                "param.limit": limit,
                                "param.offset": pageNumber * limit,
                                "param.tagName": $('.section-sub-nav a.ebrow-link.selected').text().trim() || "*",
                                "option.outputMode": "FRAGMENT",
                                "option.template": "section"
                            }
                        } else if (urlPath.indexOf("/slide-shows/")==0){
                            var squery = {
                                "param.section": "/slide-shows/*",
                                "param.limit": limit,
                                "param.offset": pageNumber * limit,
                                "param.tagName": $('.section-sub-nav a.ebrow-link.selected').text().trim() || "*",
                                "option.outputMode": "FRAGMENT",
                                "option.template": "section"
                            }
                        } else {
                            var squery = {
                                "param.section": "${currentSection}",
                                "param.limit": limit,
                                "param.offset": pageNumber * limit,
                                "param.tagName": $('.section-sub-nav a.ebrow-link.selected').text().trim() || "*",
                                "option.outputMode": "FRAGMENT",
                                "option.template": "section"
                            }
                        }

                        sectionQueryUrl += $.param(squery, true);

                        $.get( sectionQueryUrl, function( response ) {
                                var parseResponse = $.parseHTML('<ul>'+response+'</ul>');
                                var foundStories = $(parseResponse).find('li');
                                if(foundStories.length > 6){
                                    $('#single-col-stories ul').append($(foundStories));
                                    $("#load-more-button").show();
                                    
                                }else{
                                    $("#load-more-button").hide();

                                }
                                pageNumber++;
                                loadButtonClicked=false;
                            });
                        }
                };

                $('#lmb-${cqid}').click(loadMoreFunc);

                $('.section-sub-nav a.ebrow-link').on('click',function(e){
                    e.preventDefault();
                    e.stopPropagation();
                    $this = $(this);
                    if(!$this.hasClass('selected') && loadButtonClicked==false){
                        $('.section-sub-nav a.ebrow-link').removeClass('selected');
                        $this.addClass('selected');
                        $('#single-col-stories ul').empty();
                        pageNumber = 0;
                        loadMoreFunc();
                    }
                });

        });

    </script>

</#if>