ループによって表示させているリストの表示行数を、プルダウンで選択できるようにしたい

こんにちは。お世話になります。よろしくお願いいたします。

やりたいこと
Javascript/Jquery/PHPのどれかを使って以下リンク先のようなことができるようにしたいです。

JavaScriptを使用してテーブルの表示行数を3行、5行、10行とユーザーが自由に切り替えられるようにする方法

色々調べたのですが、見合った情報が見つけられませんでしたので、こちらで質問させていただいた次第です。

以下、コードを記載します。

//プルダウン設置
<div>　　
        <span>Show :</span>  
        <select id="list-num" onchange="change_table()">
            <option value="30" selected>30</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
</div>
    
//データ取り込み＆配列の作成    
    <?php
    define('API_HOST', 'localhost');
    define('API_USER', 'root');
    define('API_PASSWORD', '');
    define('API_NAME', 'parties');
    $dbc = mysqli_connect(API_HOST, API_USER, API_PASSWORD, API_NAME) or die('Error connecting to database...');
    $query = "SELECT `s_id`, `s_asset`, `s_status`, `s_lots`, `s_price`, `s_date`, `s_market`, `s_type` FROM `parties` WHERE `s_date` BETWEEN DATE(NOW()) - INTERVAL 5 DAY AND DATE(NOW()) ORDER BY `s_id` DESC";
    $data = mysqli_query($dbc, $query) or die('Data connection lost.');
    
    $msList = [];
    while ($row = mysqli_fetch_array($data)) { 
        $id = $row['s_id'];
        $signal = strtoupper($row['s_asset']);
        $status = $row['s_status'];
        $lots = $row['s_lots'] . ' Lot MAX';
        $price = $row['s_price'];
        $market = $row['s_market']; 
        $type = $row['s_type'];
    
        $msList[$id] = Array($signal, $price, $date, $time, $lots, $status, $type, $market);
    }
    
//ループでechoしている内容    (このデータの行数を変えられるようにしたい）
    foreach ($msList as $id => $ms) {　　　
        echo '<div class="list-data">
                  <h2>'.$ms[0].'</h3>'.$ms[6].'
                  <h3>'.$ms[1].'</h3> 
                  <div>
                      <p>'.$ms[2].'&nbsp;'.$ms[3].'</p>
                  </div>
              </div>';
    }
    ?>

わからない点について追記
現状作ったコードは下記です。下記のような感じ？のコードの流れになるのかなと思っております。

      <script type="text/javascript">
            function change_num(){
                var selectNum = document.getElementById('list-num');  //プルダウンのselectを取得
                var listData = document.getElementsByClassName('list-data');　//1データ
                var n = selectNum.getAttribute("value");  //選択された行数を取得

                for(i=0; i<n; i++){
                    n番目までのデータをechoする
                }
            }

そして、上記のforeach内でこのfunctionを呼び出すようにする。

難しく考えすぎているのでしょうか、どうやって選択された行数を取得すればよいのか、また次のページが必要な場合それをどのようにコードに反映させればよいのかがわからない状況です。

サンプルとなるようなコードを教えていただければ大変助かります。
どうぞよろしくお願いいたします。