Множественный переключатель скрыть список показа

Question

Как видно из приведенного ниже кода, в одном списке все работает нормально, теперь я хочу сделать то же самое для нескольких списков.

Вот моя попытка, для множественного списка, фрагмент кода прокомментирован, он не работает правильно.

Хочу отметить, что мне нужно расположить кнопки снаружи тег <dd>.

Дайте мне знать, если вам нужна дополнительная информация.

// ==== One list
$(document).ready(function () {
    size_li = $(".ids-attr-content li").length;
    x=3;
    $('.ids-attr-content').find('li.ids-sub-filters:gt('+x+')').hide().end().append(jQuery('<li class="ids-sub-filters more">...</li>'));
    $('.ids-attr-content li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+50 <= size_li) ? x+50 : size_li;
        $('.ids-attr-content li:lt('+x+')').show();
        $('li.ids-sub-filters.more').remove();
    });
    $('#showLess').click(function () {
        //x=(x-5<0) ? 3 : x-5;
        //$('.ids-attr-content li').not(':lt('+x+')').hide();
        if (!$('.ids-attr-content').find('li.ids-sub-filters').hasClass('more')) {
        	//$('.ids-attr-content').find('li.ids-sub-filters:gt('+x+')').hide().end().append(jQuery('<li class="ids-sub-filters more">...</li>'));
          //x=(x-5<0) ? 3 : x-5;
          x = 5;
        	$('.ids-attr-content li').not(':lt('+x+')').hide();
          $('.ids-attr-content').find('li.ids-sub-filters:gt('+x+')').hide().end().append(jQuery('<li class="ids-sub-filters more">...</li>'));
        }
        
    });
});

// ==== multiple list
/*$(document).ready(function () {
	$('dd.ids-attr-content').each(function(){
      size_li = $(this).find('li.ids-sub-filters').size();
      x=3;
      $(this).find('li:lt('+x+')').show();
      $('#loadMore.aa').click(function () {
          x= (x+50 <= size_li) ? x+50 : size_li;
          $(this).find('li:lt('+x+')').show();
          $(this).find('li.ids-sub-filters.more').remove();
      });
      $('#showLess.aa').click(function () {
          if (!$(this).find('li.ids-sub-filters').hasClass('more')) {
            x = 5;
            $(this).find('li').not(':lt('+x+')').hide();
            $(this).find('li.ids-sub-filters:gt('+x+')').hide().end().append(jQuery('<li class="ids-sub-filters more">...</li>'));
          }

      });
  });
});*/

#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
    display: inline-block;
    background-color: #eaeaea;
    padding: 5px 10px;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
    display: inline-block;
    background-color: #eaeaea;
    padding: 5px 10px;
}
#showLess:hover {
    color:black;
}

.ids-sub-filters.more {
  list-style-type: none;
  margin: -20px 0px 0px 25px;
  color:grey;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loadMore" class="aa">+</div>
<div id="showLess" class="aa">-</div>
<dt class="ids-attr-name odd">Region</dt>
<dd class="ids-attr-content odd">
  <ol>
    <li class="ids-sub-filters">Reg1</li>
    <li class="ids-sub-filters">Reg2</li>
    <li class="ids-sub-filters">Reg3</li>
    <li class="ids-sub-filters">Reg4</li>
    <li class="ids-sub-filters">Reg5</li>
    <li class="ids-sub-filters">Reg6</li>
    <li class="ids-sub-filters">Reg7</li>
    <li class="ids-sub-filters">Reg8</li>
    <li class="ids-sub-filters">Reg9</li>
    <li class="ids-sub-filters">Reg10</li>
  </ol>
</dd>

<div id="loadMore" class="bb">+</div>
<div id="showLess" class="bb">-</div>
<dt class="ids-attr-name odd">Region2</dt>
<dd class="ids-attr-content odd">
  <ol>
    <li class="ids-sub-filters">Reg11</li>
    <li class="ids-sub-filters">Reg22</li>
    <li class="ids-sub-filters">Reg33</li>
    <li class="ids-sub-filters">Reg44</li>
    <li class="ids-sub-filters">Reg55</li>
    <li class="ids-sub-filters">Reg66</li>
    <li class="ids-sub-filters">Reg77</li>
    <li class="ids-sub-filters">Reg88</li>
    <li class="ids-sub-filters">Reg99</li>
    <li class="ids-sub-filters">Reg1010</li>
  </ol>
</dd>