sync pagination with jqPagination

Question

how to sync pagination with jqPagination, i tried with the below code but i was unsuccessful, when i click next button the sync is not happening. i feel like i am missing a small thing but i can't figure what it is. I am still learning javascript and jquery. I downloaded jqPagination from beneverard.github.io/jqPagination/

        <div class="gigantic pagination">
            <a href="#" class="first" data-action="first">&laquo;</a>
            <a href="#" class="previous" data-action="previous">&lsaquo;</a>
            <input type="text" readonly="readonly" />
            <a href="#" class="next" data-action="next">&rsaquo;</a>
            <a href="#" class="last" data-action="last">&raquo;</a>
        </div>

        <div class="gigantic pagination">
            <a href="#" class="first" data-action="first">&laquo;</a>
            <a href="#" class="previous" data-action="previous">&lsaquo;</a>
            <input type="text" readonly="readonly" />
            <a href="#" class="next" data-action="next">&rsaquo;</a>
            <a href="#" class="last" data-action="last">&raquo;</a>
        </div>



   $(document).ready(function() {
      $('.pagination').jqPagination({
         link_string    : '/?page={page_number}',
         max_page   : 40,
         paged      : function(page) {
         $('.log').prepend('<li>Requested page ' + page + '</li>');
         }
      });
   });

This picture is what i want to achieve but instead i get results like the below picure

This picture is what i am getting instead