Não estou conseguindo solucionar esse calculo

[Omar~ 87]

Estou mechendo com uma função aqui e não estou conseguindo elaborar um calculo para filtrar quais elementos serão os alvos.

Basicamente serão listas, ao licar em um item de uma lista todas as demais listas mostram o mesmo resultado.

Tudo bem até então... O problema está em:

Ao clicar no segundo item da lista os dois próximos itens são exibidos, ao clicar por exempo no item 3 o item 2 e 4 também são exibidos e ao clicar no penúltimo item os dois itens anteriores devem ser exibidos. 

Sempre assim 3 itens serão exibidos ao mesmo tempo em cada lista, e sempre ignorando o primeiro e o último item de cada lista e dando destaque ao item clicado.

 

Como o primeiro e o ultimo não vão ser ocultados digamos que o segundo é o primeiro e penúltimo é o ultimo, pois eles serão usados para navegar ao primeiro e o último.

Quem quiser dar um força aqui agradeço porque não estou vendo um solução para o caso, pode ser até algo bobo que não está me vindo a cabeça.

Segue o código:

Spoiler

<style>
    ul {list-style: none}
    li {
        display: inline-block;
        padding: 10px;
        background: darkgray;
        border: 1px solid black
    }
    li.destacar {background:blue}
    li.esconder {display:none}
</style>

<ul>
    <li data-clique="0">A - Não alterar</li>
    <li data-clique="0">A - 0</li>
    <li data-clique="1">A - 1</li>
    <li data-clique="2">A - 2</li>
    <li data-clique="3">A - 3</li>
    <li data-clique="4">A - 4</li>
    <li data-clique="5">A - 5</li>
    <li data-clique="5">A - Não alterar</li>
    <li>Extra não alterar</li>
</ul>

<ul>
    <li data-clique="0">B - Não alterar</li>
    <li data-clique="0">B - 0</li>
    <li data-clique="1">B - 1</li>
    <li data-clique="2">B - 2</li>
    <li data-clique="3">B - 3</li>
    <li data-clique="4">B - 4</li>
    <li data-clique="5">B - 5</li>
    <li data-clique="5">B - Não alterar</li>
    <li>Extra não alterar</li>
</ul>

<script>
    var ul = document.querySelectorAll('ul');
    var clique = document.querySelectorAll('[data-clique]');
    clique.forEach(function (e) {
        e.addEventListener('click', trocar, false);
    });

    function trocar(alvo) {
        var cliqueAtual = parseInt(alvo.target.dataset.clique);
        var int;
        var ultimo = 0;

        for (var i = 0; i < ul.length; i++) {
            clique = ul[i].querySelectorAll('[data-clique]');

            ultimo = (clique.length - 1);

            for (var j = 0; j < clique.length; j++) {
                int = parseInt(clique[j].dataset.clique);
                
                clique[j].classList.remove('destacar');
                clique[j].classList.remove('esconder');

                if (int === cliqueAtual) { // detaca o que foi clicado
                    clique[j].classList.add('destacar');
                }
                if (j !== 0 && clique[j] !== clique[ultimo]) { // ignora o primeiro e o último
                    if (int > (cliqueAtual + 1)) {
                        clique[j].classList.add('esconder');
                    }
                    if (int < (cliqueAtual - 1)) {
                        clique[j].classList.add('esconder');
                    }
                }

            }
        }
    }
</script>

 

 

Na verdade a coisa é bem mais complexa que isso, mas resolvendo esse exemplo posso chegar a solução da função real, isso apresentado aqui só foi para simplificar para o fórum.