A intenção é correr os cinco [5] primeiros números carnidais em sequência sendo exibidos de cinco-em-cinco, mas devendo se apagado os anteriores e posteriormente correr mais cinco [10] (que vai do 6 à 10), até atingir um certo limite imposto dentro da função, ou seja, será determinado até que ponto esses numerais serão aplicados pelos botões 'incrementar' e 'desicrementar'. Tenho tentado da seguinte forma:

    

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var spn = document.getElementsByTagName('span');

    function mostrarGrupo() {
      // Limitar o número de números a serem exibidos
      var inicio = 5;
      // Correr elementos span afim de quantificar
      for (var i = 0; i < spn.length; i++) {
        spn[i].innerHTML += inicio + 1;
        inicio++
      }
    }

    function esconderGrupo() {
      // Limitar o número de números a serem exibidos
      var inicio = 5;
      // Correr elementos span afim de quantificar
      for (var i = 0; i < spn.length; i--) {
        spn[i].innerHTML += inicio + 1;
        inicio--
      }
    }

<!-- language: lang-html -->

    <center>

      <button id="menos" onclick="esconderGrupo">-</button>

      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>

      <button id="mais" onclick="mostrarGrupo">+</button>

    </center>

<!-- end snippet -->

**PRINT**

[![inserir a descrição da imagem aqui][1]][1]

[![inserir a descrição da imagem aqui][2]][2]

No momento estou pensando em outras soluções para este fim. No entanto, gostaria de ouvir ou ver o que vocês me sugerem?


  [1]: https://i.sstatic.net/pW7GX.jpg
  [2]: https://i.sstatic.net/8IuJU.jpg