Untitled

<!DOCTYPE html>
<html>
<head>
  <title>TODO List</title>
</head>
<body>
  <h1>To-Do List</h1>
  <input placeholder="Type Here" id="input">
  <button onclick="add()">Add</button>

  <div id="items"><ol>
    <li id="item1"></li><button id="check1" onclick="clear1()">Done</button>
    <li id="item2"></li><button id="check2" onclick="clear2()">Done</button>
    <li id="item3"></li><button id="check3" onclick="clear3()">Done</button>
    <li id="item4"></li><button id="check4" onclick="clear4()">Done</button>
    <li id="item5"></li><button id="check5" onclick="clear5()">Done</button>
  </ol></div>
<script type="text/javascript">
  var item1 = document.getElementById("item1");
  var item2 = document.getElementById("item2");
  var item3 = document.getElementById("item3");
  var item4 = document.getElementById("item4");
  var item5 = document.getElementById("item5");
  document.getElementById("check1").style.display = "none";
  document.getElementById("check2").style.display = "none";
  document.getElementById("check3").style.display = "none";
  document.getElementById("check4").style.display = "none";
  document.getElementById("check5").style.display = "none";
  function add(){
    var input = document.getElementById("input").value;
    if(item1.innerText == "") {
      item1.innerText = input;
      document.getElementById("check1").style.display = "block";
    } else if(item2.innerText == "") {
      item2.innerText = input;
      document.getElementById("check2").style.display = "block";
    } else if(item3.innerText == "") {
      item3.innerText = input;
      document.getElementById("check3").style.display = "block";
    } else if(item4.innerText == "") {
      item4.innerText = input;
      document.getElementById("check4").style.display = "block";
    } else if(item5.innerText == "") {
      item5.innerText = input;
      document.getElementById("check5").style.display = "block";
    }
  }
function clear1(){
 item1.innerText = "";
 document.getElementById("check1").style.display = "none";
}
function clear2(){
 item2.innerText = "";
 document.getElementById("check2").style.display = "none";
}
function clear3(){
 item3.innerText = "";
 document.getElementById("check3").style.display = "none";
}
function clear4(){
 item4.innerText = "";
 document.getElementById("check4").style.display = "none";
}
function clear5(){
 item5.innerText = "";
 document.getElementById("check5").style.display = "none";
}
</script>
</body>
</html>