Mostrar e ocultar items de diversas listas

Olá, recentemente abri uma dúvida aqui que rapidamente foi solucionada. Eu queria, sem usar JQuery, fazer aparecer e ocultar items de uma lista a partir do 4º item.

A solução foi essa:

<style type="text/css">
.s-more > .s-more-items:last-child::after {
  content: " +";
}

.s-d-none{
  display: none;
}
</style>

<ul class="s-more">
    <li class="s-more-items">1</li>
    <li class="s-more-items">2</li>
    <li class="s-more-items">3</li>
    <li class="s-more-items">4</li>
    <li class="s-more-items">5</li>
    <li class="s-more-items">6</li>
    <li class="s-more-items">7</li>
    <li class="s-more-items">8</li>
    <li class="s-more-items">9</li>
    <li class="s-more-items">10</li>
    <li class="s-more-items">11</li>
    <li class="s-more-items">12</li>
    <li class="s-more-items">13</li>
    <li class="s-more-items">14</li>
    <li class="s-more-items" onclick="morelist()">VEJA MAIS</li>
  </ul>

  <script type="text/javascript">
  function morelist(){
  var cont = 0;
  var items = document.querySelectorAll(".s-more-items");
  var itemsNone = document.querySelectorAll(".s-d-none");

  if (itemsNone.length > 0) {
    items.forEach(item => item.classList.remove("s-d-none"));
  }
  else {
    items.forEach(item => {
      if (cont < 4 || cont == items.length-1) {
      }
      else{
        item.classList.add("s-d-none");
      }
      cont++;
    });
  }
}

 window.onload = morelist();
</script>

Porém eu gostaria que VÁRIAS listas numa mesma tabela funcionassem com o mesmo comportamento, e esse código só permite uma lista.

Também gostaria que o VEJA MAIS virasse RECOLHER quando a lista é expandida, para escondê-la de novo... Mas o mais importante é aprimorar o código pra que ele funcione em todas as listas sem interferir nas outras.

Eu quero replicar a tabela desta página aqui: https://www.kdpneus.com.br/lojas

Desde já, agradeço a comunidade! Vocês tem me ajudado muito neste começo de carreira!