検索し、そのまま再び検索ボタンを押すと次の20件の商品を上に積み上げていく形で表示させたいのですがどのようにしたら出来ますか？

   <!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>jQuery</title>
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="../../common/css/base.css">
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <div class="wrap">
      <div class="container">
        <div class="header">
          <p class="header__title">Search Books!</p>
        </div>
        <div class="search">
          <div class="search__text">
            <input type="text" id="js-search-word" class="search__text__input" placeholder="検索する">
          </div>
          <button id="js-search-button" class="search__btn">検索する</button>
        </div>
        <ul class="lists"></ul>
      </div>
    </div>
    <script src="../../common/js/jquery.js"></script>
    <script>
     $(function(){
      $('#js-search-button').on('click',function(){
        var keyword = $('#js-search-word').val();
        $.ajax({
         url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522',
         type: 'GET',
         datatype: 'json',
         data: {
          applicationId: '1019399324990976605', 
          booksGenreId: '001',
          keyword: keyword,
          hits: '20',

        }}).done(function(data){
          if (data.count > 0){
            $("ul").empty();
            $.each(data.Items,function(i,item){
              var list = $("<li class='lists__item'>" +
                "<div class='lists__item__inner'>" +
                "<a href='" + item.Item.itemUrl + "'class='lists__item__link' target='_blank'>" + 
                "<img src='" + item.Item.largeImageUrl + "' class='lists__item__img' alt>" +
                "<p class='lists__item__detail'>作品名：　" + item.Item.title + '</p>' +
                "<p class='lists__item__detail'>作者　：　" + item.Item.author + '</p>' +
                "<p class='lists__item__detail'>出版社：　" + item.Item.publisherName + '</p>' + '</a>' +
                '</div>' + '</li>');
              $('ul').prepend(list);
            })
          } else {
            $('.lists').before('<div class="coment"></div>')
            coment = $('.coment');
            coment.html('<p class="message">検索結果が見つかりませんでした</p>');
          }
        });
      });
      });
    </script>
  </body>
</html>