Não estou conseguindo solucionar esse calculo

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.