JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myToDo">
            <h1>To do List</h1>
            <button id="checkk">&#9660;	</button>
            <input type = "text" placeholder="Enter your plan">
            <ul id="plan"></ul>
            <p id="cnt">COUNT : <span id="span"></span></p>
            <button id="completed">Clear Completed</button>
            <div class="bothbuttons">
                <p>How Much : <span id="cn"></span></p>
                <button id="completed">Res.Comp</button>
                <button id="mn">Main</button>
                <button id="act">Active</button>
                <button id="Comp">Completed</button>
            </div>
         </div>

JavaScript

let inputValue = document.querySelector('input');
let btn = document.getElementsByTagName('button');
let ulListPlan = document.getElementById('plan');
let clearComleted = document.getElementById('completed');
let checkAll = document.getElementById('checkk');
let cn = document.getElementById('cn');
let active = document.getElementById('act');
let completed = document.getElementById('Comp')
let main = document.getElementById('mn');

inputValue.addEventListener('keyup', function (event) {
    // Clear completed items
    clearComleted.addEventListener('click', function () {
        let completed = document.querySelectorAll('input[type="checkbox"]:checked');
        for (let entry of completed) {
            entry.parentNode.remove();
        }
    });
});
//Creating li delete and check button
function createTodo(value) {
    let li = document.createElement('li')
    let checkBox = document.createElement('input');
    let close = document.createElement('button');
    let text = document.createTextNode(value);
    close.textContent = "x";
    checkBox.type = "checkBox";
    //Creating plans with checkbox and delete button
    if (event.keyCode == 13) {
        li.innerHTML = inputValue.value;
        ulListPlan.appendChild(close);
        ulListPlan.appendChild(li);
        ulListPlan.appendChild(checkBox);
        //check status
        checkBox.onclick = function () {
            if (checkBox.checked) {
                li.style.userSelect = 'none';
                li.style.backgroundColor = 'grey'
            } else if (checkBox.checked == false) {
                li.style.backgroundColor = 'white';
                li.style.userSelect = "text";
            }
        }
        //Delete plans one by one
        close.onclick = function () {
            li.parentNode.removeChild(li);
            close.parentNode.removeChild(close);
            checkBox.parentNode.removeChild(checkBox);
        }
    }
}
//how much plans
let liLenght =...