Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Meu segundo "Checkbox" não funciona corretamente.

Ao testar a adição de itens, percebi que sempre o segundo "checkbox" criado, não funciona. index.html

<!-- Código anterior -->
                                    <label for="checkbox-1">
                                        <input type="checkbox" class="checkbox-input" id="checkbox-1">
                                        <div class="checkbox-customizado checked"></div>
                                    </label>
<!-- Código posterior-->

script.js

// Código anterior
    checkboxLabel.addEventListener("click",function (evento) {
        const checkboxInput = evento.currentTarget.querySelector(".checkbox-input");
        const checkboxCustomizado = evento.currentTarget.querySelector(".checkbox-customizado")

        if (checkboxInput.checked) {
            checkboxCustomizado.classList.add("checked");
        }
        else{
            checkboxCustomizado.classList.remove("checked");
        }
    })
// Código posterior

Caso necessário, mandarei o código inteiro

1 resposta
solução!

Descobri a solução. No arquivo HTML, no input do checkbox, o "id=checkbox-0" era o problema. pois como ele já possuía um número como padrão, os novos checkbox's que compartilhassem o mesmo número do id, não funcionariam corretamente. Portanto, a solução foi retirar o número e deixar apenas "id=checkbox-", assim o código continua funcionando sem necessidade de alterar qualquer outra parte.

index.HTML

<!-- Foco no id do input, é necessário retirar o número apenas-->
                                    <label for="checkbox-">
                                        <input type="checkbox" class="checkbox-input" id="checkbox-">
                                        <div class="checkbox-customizado checked"></div>
                                    </label>