[Dúvida] Problema com JS em listas do HTML

Opa colega,

podes por os itens da lista como um input checkbox e utilizar uma propriedade "condicional" do CSS.

#lista1__item2:checked~#lista2__item2{
display: block;}
#lista1__item2:checked{
display: none}

Da pra fazer isso para cada item e tem que usar o id, se usar classe ele vai aplicar em todos os itens com aquela classe. Um adendo, é um metodo só de ida, quando selecionar o item na primeira lista ele vai ir para a outra lista porém não vai poder trocar da lista 2 pra 1, caso esse n seja seu propósito comenta aqui no forum. Sugiro que seja feito em JS, se quiser ajuda com o código só responder ao fórum!

Olá mano, primeiramente grato pelas dicas... Eu tentei pelo checkbox e ate que deu certo, mas é aquilo que voce falou, só deu pra ir... Gostaria de manipular as listas livremete.. tipo eu criei 2 listas no js e consegui passar elementos de uma pra outra usando o push e slice, queria aplicar isso no HTML (se possivel claro...)

Tendo a funcao ja é mt mais facil, agora só precisa de uma funcao para exibir os arrays como lista, fiz um código que faz exibir o array l1 como lista no elemento #lista1 por exemplo:

lista1 = document.getElementById("lista1")
lista2 = document.getElementById("lista2")
item = 0
lista1.innerHTML = '<ul id="lista1">'
while (item < l1.length){
    lista1.innerHTML += '<li onclick="funcao()">' + l1[item] + '</li>'
    item++
}
lista1.innerHTML += '</ul>'

Basta repetir o código alterando os valores para se adaptarem a sua segunda lista e trocar a função em "onclick" por aquela que você fez.

Qualquer duvida, chama.

Opa, mals a demora pra responder, eu tentei concatenar o array com a lista no HTML de todas formas, mas falhei miseravelmente =/ usando oq vc me passo e uns exemplos que achei na net eu consegui chegar nisso... HTML:

    <ul id="list1">
        <li id="a"><a href="#">Item 1</a></li>
        <li id="b"><a href="#">Item 2</a></li>
        <li id="c"><a href="#">Item 3</a></li>
      </ul>

    <ul id="list2">

    </ul>  

JS:

var list1 = document.getElementById("list1");
var list2 = document.getElementById("list2");

var a = document.querySelector("#a");
var b = document.querySelector("#b");
var c = document.querySelector("#c");

a.addEventListener("click", (event) => {
    list2.innerHTML += `<li><a href="#">Item 1</a></li>`;
});

b.addEventListener("click", (event) => {
    list2.innerHTML += `<li><a href="#">Item 2</a></li>`;
});

c.addEventListener("click", (event) => {
    list2.innerHTML += `<li><a href="#">Item 3</a></li>`;
});

Adimito que fico bem na gambiarra, haha tentei meter um laço pra nao aceitar elementos repetidos, mas travo td.... isso ta mais dificil q pensei :x