Jquery Multi Filter + Загрузить больше

Question

Я хочу создать фильтр сообщений на основе 2 выпадающего списка, и я хочу показать 5 сообщений по умолчанию.

после этого, когда люди нажимают на кнопку «Загрузить больше», будет отображаться больше 5 сообщений .. (если включить фильтр, то загрузить больше 5 сообщений с помощью фильтра)

Я уже пробовал эти коды .. фильтр по выпадающему меню работает ... загрузить больше работает для всех сообщений .. но он не работает для 5 сообщений по умолчанию или загрузить более 5 сообщений с использованием фильтра

<p>Filter: </p>
        <select class="filterby">
        <option value="all"><h5>Show All</h5></option>
        <option value="1"><h5>One</h5></option>
        <option value="2"><h5>Two</h5></option>
        <option value="3"><h5>Three</h5></option>
      </select>
      <p>Location: </p>
        <select class="filterby">
        <option value="all"><h5>All Locations</h5></option>
        <option value="nj"><h5>NJ</h5></option>
        <option value="ny"><h5>NY</h5></option>
        <option value="pa"><h5>PA</h5></option>
      </select>
      <div id="loadMore">Load more</div>


  <ul id="FilterContainer">
    <li class="all 1 nj">Test One NJ</li>
    <li class="all 1 ny">Test One NY</li>
    <li class="all 1 pa">Test One PA</li>
    <li class="all 2 nj">Test Two NJ</li>
    <li class="all 2 ny">Test Two NY</li>
    <li class="all 2 pa">Test Two PA</li>
    <li class="all 3 nj">Test Three NJ</li>
    <li class="all 3 ny">Test Three NY</li>
    <li class="all 3 pa">Test Three PA</li>
    <li class="all 1 nj">Test One NJ</li>
    <li class="all 1 pa">Test One PA</li>
    <li class="all 1 pa">Test One PA</li>
    <li class="all 2 nj">Test Two NJ</li>
    <li class="all 2 ny">Test Two NY</li>
    <li class="all 2 ny">Test Two NY</li>
    <li class="all 1 nj">Test One NJ</li>
    <li class="all 1 ny">Test One NY</li>
    <li class="all 1 pa">Test One PA</li>
    <li class="all 2 nj">Test Two NJ</li>
    <li class="all 2 ny">Test Two NY</li>
    <li class="all 2 pa">Test Two PA</li>
    <li class="all 3 nj">Test Three NJ</li>
    <li class="all 3 ny">Test Three NY</li>
    <li class="all 3 pa">Test Three PA</li>

$(window).on('load', function() {
      $("select.filterby").change(function(){
          var filters = $.map($("select.filterby").toArray(), function(e){
              return $(e).val();
          }).join(".");
          $("ul#FilterContainer").find("li").hide();
          $("ul#FilterContainer").find("li." + filters).show();
      });

      $(function () {
          x=3;
          $('#FilterContainer li').slice(0, 3).show();
          $('#loadMore').on('click', function (e) {
              e.preventDefault();
              x = x+5;
              $('#FilterContainer li').slice(0, x).slideDown();
          });
      });
    });

Я не профессионал вЯваскрипт и все еще изучает это. Я уже вижу эту статью , которая почти соответствует моему требованию, но используется ее ссылка, и мне нужно выпадающее меню.