How to add all checked boxes into separate LI tags

I want to separate all checked items into LI tags but right now it is adding them all to a single LI tag. What am I doing wrong? It's probably simple and I'm just dumb :(

let ul = document.querySelector('.ul')
let li = document.createElement('li')


getSelectedToys() {
        let { selectedToys } = this;
        const checked =  document.querySelectorAll('input[type=checkbox]:checked')


        for (var i = 0; i < checked.length; i++) {
            selectedToys.push(checked[i].value)
            console.log(selectedToys[i])           
        }

        selectedToys.forEach(function(item) {
            ul.appendChild(li)
            let text = document.createTextNode(item);
            li.appendChild(text)
       })