pagination.jsのページャーを出力したデータの上下に付けたい

お世話になっております。

pagination.jsを使用してページネーションの実装を行いました。
基本的には問題なく動作するのですが、ページャーを出力したデータの上下に配置する方法が良く分かりません。
参考にしたサイト

ソースは以下の通りです。

HTML
1<body>
2  <p>ここにデータを出力</p>
3    <div class="pager"></div><!-- ページャーの埋め込み先を指定 -->
4    <ul>
5      <div id="diary-all-contents"></div><!-- コンテンツの埋め込み先を指定 -->
6    </ul>
7    <div class="pager2"></div><!-- ページャーの埋め込み先を指定 -->
8  </nav>
9
10  <script src="jquery-3.5.1.min.js"></script>
11  <script src="pagination.min.js"></script>
12</body>

js
1$(function () {
2    // [1] 配列のデータを用意
3    var diaryw = [
4      {
5        title: "○○を買った",
6        link: "https://foobar/diary/1234",
7        category: "交流",
8        class: "Relationship",
9        date: "2020年02月04日"
10      }
11      // ...以下略
12    ]
13
14    // [2] pagination.jsの設定
15    $(function() {
16      $('.pager').pagination({ // pagerにページャーを埋め込む
17          dataSource: diaryw,
18          firstEndPageBtnMode: false,
19        callback: function(data, pagination) {
20          // dataの中に次に表示すべきデータが入っているので、html要素に変換
21          $('#diary-all-contents').html(template(data)); // diary-all-contentsにコンテンツを埋め込む
22        }
23      });
24        
25      $('.pager2').pagination({ // pager2にページャーを埋め込む
26        dataSource: diaryw,
27        firstEndPageBtnMode: false,
28      callback: function(data, pagination) {
29        // dataの中に次に表示すべきデータが入っているので、html要素に変換
30        $('#diary-all-contents').html(template(data)); // diary-all-contentsにコンテンツを埋め込む
31      }
32    });
33    });
34    // [3] データ1つ1つをhtml要素に変換する
35    function template(dataArray) {
36      return dataArray.map(function(data) {
37        return '<li class="c-pagination__item"><a href="' + data.link + '">'
38        + '<p class="category category-' + data.class + '">' + data.category + '</p>'
39        + '<p class="title">' + data.title + '</p>'
40        + '<p class="date">' + data.date + '</p></a></li>'
41      })
42    }
43});

【前提】
HTMLではクラスpagerとpager2を用意し、javascriptでデータを埋め込んでいます。
jsではどちらのページャーをクリックした場合でも動作し、同じタグにデータを出力するようにしています。

【質問】
目的はページャーを上下に配置し、かつそのページャーの動作が連動している事です。
上記の実装ではページャーの動作が連動していませんが、連動するようjavascriptで制御する事は出来ると思います。
しかし、処理が煩雑で正しい実装方法ではないと感じています。
ページャーの埋め込み先のタグは一つとし、pagination.jsの設定で上下に配置出来ないか調べてみましたが、思うような記述はありませんでした。
リファレンス
現状、タグを一つとした場合はページャーも一つしか表示されない為、無理矢理pager2を用意しjsにも同じ処理を書いているのですが、これで良いのでしょうか・・？
何か良い実装方法があれば、教えていただけますでしょうか。
よろしくお願いいたします。