JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>To Do List</title>
</head>
<body>
    <h1>Kung Fu To Do List 1.0</h1>
    <ul id="list">
        <li><input type="checkbox" value="true">asdf</li>
        <li><input type="checkbox" value="false">asdf</li>        <li><input type="checkbox" value="true">asdf</li>
        <li><input type="checkbox" value="false">asdf</li>        <li><input type="checkbox" value="true">asdf</li>
        <li><input type="checkbox" value="false">asdf</li>        <li><input type="checkbox" value="true">asdf</li>
        <li><input type="checkbox" value="false">asdf</li>        <li><input type="checkbox" value="true">asdf</li>
        <li><input type="checkbox" value="false">asdf</li>
    </ul>
    <div id="percent"></div>
    <button onclick="newCheckbox()">new item</button>
</body>
</html>

JavaScript

var list;
document.addEventListener("DOMContentLoaded",load);
function load(){
    list = get("list");
    checkboxes = getTag("input");
    for(var i = 0, l = checkboxes.length; i < l; i++){
        checkboxes[i].addEventListener("click", toggle);
    }
    updatePercentage();
}
function updatePercentage(){
    var checkboxes = getTag("input");
    var total = checkboxes.length;
    var done = 0;
    for(var i = 0, l = checkboxes.length; i < l; i++){
        if(checkboxes[i].checked){
            done++;    
        }
    }
    get('percent').innerHTML = 'Done: '+Math.round((done/total)*100)+'%';
}
function newCheckbox(){
    var item = document.createElement('li');
    var chk = document.createElement('input');
    chk.type = 'checkbox';
    chk.addEventListener("click", toggle);
    item.appendChild(chk);
    list.appendChild(item);
    updatePercentage();
}
function toggle(){
    //alert(this.value);
    updatePercentage();
}
function get(id){
    return document.getElementById(id);
}
function getTag(tag){
    return document.getElementsByTagName(tag);
}