<script>
    function getProcess(ul) {
        let total = 0, checked = 0;
        var childs = ul.childNodes;
        for (let i = 0; i < ul.childNodes.length; i++) {
            var item = ul.childNodes[i]
            if (item.childNodes.length > 0) {
                // console.log(1)
                // console.log(item.childNodes[0].checked)
                if (item.childNodes[0].checked) {
                    checked++
                }
                total++
            }
        }
        return [checked, total]
    }

    function createProgressDiv(max, value) {
        let sp1 = document.createElement("div");
        let progress = document.createElement("progress")
        progress.value = value
        progress.max = max
        sp1.appendChild(progress)
        let text = ` ${value}/${max}`
        let progressInNumber = document.createTextNode(text)
        sp1.appendChild(progressInNumber)
        return sp1
    }

    function insertBeforeUL(ul) {
        const [checked, total] = getProcess(ul);
        if (checked == 0) {
            return;
        }
        let progressDiv = createProgressDiv(total, checked)
        let parentDiv = ul.parentNode;
        parentDiv.insertBefore(progressDiv, ul);
    }

    var ulList = document.querySelectorAll('ul')
 
    for (let i = 0; i < ulList.length; i++) {
       insertBeforeUL(ulList[i])
    }
</script>