JSFiddle - React, Tailwind, and code Playground

HTML

<div class="myToDo">

            <h1>To do List</h1>
            <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 items</button>
         </div>

JavaScript

let inputValue = document.querySelector('input');
let btn = document.getElementsByTagName('button');
let ulListPlan = document.getElementById('plan');

inputValue.addEventListener('keyup',function(event){
    let li = document.createElement('li')
    let checkBox = document.createElement('input');
    let close = document.createElement('button');
    close.innerHTML = "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 = document.querySelectorAll('li');
let howMuch = document.getElementById('cnt');
let spn = document.getElementsByClassName('span');
for(let i = 1; i < liLenght.length;++i){
    span.innerHTML = i;
}
//Clear all complated plans
let clearComleted = document.getElementById('completed');
clearComleted.onclick = function(){
    if(checkBox.checked){
        ;
    }
}
})