多个切换隐藏显示列表

Question

如下面的代码所示，在单个列表中，它工作正常，现在我想对多个列表执行相同的操作。

这是我的尝试，对于多重列表，这段代码被注释了，无法正常工作。

我注意到我必须将按钮{strong>外侧放在<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>