jQueryで作る特定数ずつ表示させるリスト

特定数ずつ表示させるリストを作りました。
今回はjQueryを使用しています。
デモでは最初に3個表示させ、ボタンを押すと３個ずつ表示させます。

複数あったときにどうやって値を残しておこうかと考えていましたが配列に入れることにしました。

See the Pen 181013_3件ずつ表示するリスト by nekuta (@nekuta) on CodePen.

js(jQuery)

  var $demo = $(".demo");
  var $btn = $(".btn");
  var numList = []; //空の配列を作っておく
  var firstNum = 3; //最初の個数
  var flg = true;

  for (var i = 0; i < $demo.length; i++) {
    //listのliを全てshowする
    $demo.eq(i).find("li").show();
    //firstNum(ここでは3)以上のliをhide()
    $demo.eq(i).find("li:not(:lt(" + firstNum + "))").hide();
    //numListにfirstNum(ここでは3)を$demoの個数分push
    numList.push(firstNum);
    //data-list-selectというカスタムデータ属性を作っておく
    $demo.eq(i).attr("data-list-select", 'select-' + i);

    //.contentの高さ計算
    var demoH = $demo.eq(i).height();
    var titleH = $demo.eq(i).find('.title').innerHeight();
    $demo.eq(i).find('.content').css('height', demoH - titleH);
  }
  $btn.on("click", btn);

  function btn() {
    var liH = $(this).parent().prev().find("li").length;
    //data-list-selectを見にいく
    var thisData = $(this).closest(".demo").attr("data-list-select");
    //例えばselect-0の場合、数字の0だけ取ってくるようにする
    var sliceData;
    sliceData = thisData.match(/\d/g);
    sliceData = sliceData.map(function(element) {
      return Number(element);
    });

    var num = numList[sliceData];

    if (flg == true) {
      //listのliの個数が配列の数字よりも大きい場合に処理
      if (liH >= num) {
        flg = false;

        //配列の数字をfirstNum(ここでは3)分足していく。
        //firstNumを別の数字に変えるとボタンを押した時の表示個数が変わります
        num += firstNum;
        //numList.splice(sliceData, 1, num)でnumListのインデックス番号sliceData番目から、1つの要素を削除し、そこにnumを挿入
        numList.splice(sliceData, 1, num);

        $(this).parent().prev().find("li:lt(" + num + ")").slideDown();
        flg = true;
      } else {
        flg = true;
      }
    }

    if (num >= liH) {
      $(this).addClass('disabled');
    }
    return false;
  }