Ajaxを使って楽天BOOKSの検索フォームを作成する

前提・実現したいこと

楽天BOOKsの検索フォームをAJAXを使って作っております。
検索をかけた際、それに関する２０件が表示されます。
別のワードで検索した際に、今まで検索したものが消えて新たに検索したものに関する情報が
２０件表示されるように作っていきます。

発生している問題・エラーメッセージ

同じワードで検索をした際は１〜２０件、２１〜４０件と順番に出てきてくれるのですが
別のワードで検索をかけた際に１〜２０件ではなく、続いて４１〜６０件、６１〜８０件が出てきてしまう。
ワードを変えた際はそれに関する１〜２０件から表示させたいです。

該当のソースコード

jquery
1<script src="../../common/js/jquery.js"></script>
2<script>
3  $(function() {
4    //グローバル変数
5    var pageNum = 0;
6    var searchword = '';
7    var prevword = '';//前のワードの空の変数
8    $('#js-search-button').on('click', function() {//クリックされた時に実行される
9     searchword = searchButton();
10     pageNum = countUp();
11    // console.log(pageNums);
12    console.log(searchword);
13    console.log(prevword);
14    execAjax();//execAjaxの実行
15
16    function countUp() {
17      pageNum = pageNum + 1;
18      return pageNum;//+になった値が上に返る
19    }
20
21    function searchButton() {
22// '#js-search-button'がクリックされたとき,検索した名前の取得の処理がここに書かれている
23      var search = $('#js-search-word').val();
24    // console.log(searchword);
25      return search
26    }
27
28    if(prevword !== searchword) {//一致しなかった場合の処理
29        $('ul').empty(); // 違うワードが検索された時にulの中身を空にする
30        // pageNum = 1;
31        prevword = searchword;//検索された前の値を取得
32      }
33      });
34
35    function execAjax () {//検索したワードに関連した本のデータを取得する処理
36      console.log(searchword);
37      console.log(pageNum);
38        $.ajax({
39          url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522',//楽天APIにアクセス
40          type: 'GET',
41          datatype: 'json',
42          data: {
43            applicationId: '',
44            booksGenreId: '001',
45            hits: 20,
46            page: pageNum,
47            keyword: searchword
48          },
49  }).done(function(data) {
50    console.log(data.Items);
51    // console.log(data.page);
52        var template = '';
53        $.each(data.Items, function(i,item) {
54             template += '<li class='+'lists__item'+'>'+
55                           '<div class='+'lists__item__inner'+'>'+
56                           '<a href='+' class='+'lists__item__link'+' target='+'_blank'+'>'+
57                           '<img src='+ item.Item.mediumImageUrl +' class='+'lists__item__img'+' alt='+'>'+
58                           '<p class='+'lists__item__detail'+'>作品名：'+ data.Items[i].Item.title +'</p>'+
59                           '<p class='+'lists__item__detail'+'>作者　：'+ data.Items[i].Item.author +'</p>'+
60                           '<p class='+'lists__item__detail'+'>出版社：'+ data.Items[i].Item.publisherName +'</p>'+
61                           '</a>'+'</div>'+'</li>';
62        });
63        $('.lists').prepend(template);
64    });
65    }
66});
67</script>

試したこと

if文を使ってみました。
if(prevword !== searchword) {
$('ul').empty();
pageNum = 1;
prevword = searchword;
}
});

pageNum = 1;とすることでページの値が１に戻り
１〜２０件が表示されると思ったのですが、うまくいきません。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<title>jQuery</title>
8<link rel="stylesheet" href="../../common/css/reset.css">
9<link rel="stylesheet" href="../../common/css/base.css">
10<link rel="stylesheet" href="./css/style.css">
11</head>
12<body>
13<div class="wrap">
14  <div class="container">
15    <div class="header">
16      <p class="header__title">Search Books!</p>
17    </div>
18    <div class="search">
19      <div class="search__text">
20        <input type="text" id="js-search-word" class="search__text__input" placeholder="検索する" >
21      </div>
22      <button id="js-search-button" class="search__btn">検索する</button>
23    </div>
24    <ul class="lists"></ul>
25  </div>
26</div>
27</body>
28</html>

css
1.clearfix:after {
2  display: block;
3  clear: both;
4  content: '';
5}
6.wrapper {
7  padding: 20px;
8}
9.container {
10}
11.header {
12  width: 100%;
13  background-color: #43cee0;
14}
15.header__title {
16  line-height: 60px;
17  text-align: center;
18  font-size: 20px;
19  color: #fff;
20}
21.search {
22  overflow: hidden;
23  margin-bottom: 50px;
24  background: #fff;
25  box-shadow: 0 1px 5px #ccc;
26}
27.search__text {
28  width: 100%;
29}
30.search__text__input {
31  -webkit-box-sizing: border-box;
32      box-sizing: border-box;
33  width: 100%;
34  margin-bottom: 20px;
35  padding: 0 10px;
36  line-height: 3em;
37  border-top: none;
38  border-left: none;
39  border-right: none;
40  border-bottom: 1px solid #eee;
41  font-size: 20px;
42}
43.search__btn {
44  display: block;
45  margin: 0 auto 20px;
46  padding: 0 20px;
47  line-height: 40px;
48  border: none;
49  font-size: 18px;
50  color: #fff;
51  background-color: #43cee0;
52}
53.search__btn:hover {
54  background-color: #1eabbd;
55}
56.lists {
57  overflow: hidden;
58  margin-left: 20px;
59  
60}
61.lists__item {
62  -webkit-box-sizing: border-box;
63      box-sizing: border-box;
64  display: inline-block;
65  width: 25%;
66  padding: 0 20px 20px 0;
67  vertical-align: top;
68  text-align: center;
69}
70.lists__item__inner {
71  width: 100%;
72  max-width: 200px;
73  margin: 0 auto;
74}
75.lists__item__link {
76  display: block;
77  text-decoration: none;
78}
79.lists__item__img {
80  margin-bottom: 20px;
81  width: 100%;
82  max-width: 150px;
83  -webkit-box-shadow: 0 1px 5px #ccc;
84      box-shadow: 0 1px 5px #ccc;
85}
86.lists__item__detail {
87  margin-bottom: 10px;
88  padding-left: 5em;
89  text-indent: -5em;
90  line-height: 1.5em;
91  text-align: left;
92  font-size: 12px;
93}
94.message {
95  margin-bottom: 50px;
96  text-align: center;
97}
98
99@media screen and (max-width: 767px) {
100  .lists__item {
101    width: 33.33%;
102  }
103}
104
105@media screen and (max-width: 479px) {
106  .lists__item {
107    width: 50%;
108  }
109}