JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<body>
  <input id="input_Text"><br>
    <button type="button" onclick="myFunction();">Submit</button><br>
     <ul id="list"></ul>
     <script>
      var elements_array=[];
       function myFunction() {
        var inputValue = document.getElementById('input_Text').value;
        document.getElementById("input_Text").value = "";
        elements_array.push({name:inputValue});
        for (var i =0; i<elements_array.length;i++){
        
         var input_Value = document.createTextNode(inputValue);
      var checkbox = document.createElement('input');
      checkbox.type="checkbox";
      checkbox.class="check";
      var newList = document.createElement("li");
      var editButton=document.createElement("button");
      editButton.innerText="Edit";
      
	    var deleteButton=document.createElement("button");
      deleteButton.id="deleteBtn_"+i;
      editButton.id="editBtn_"+i;
      editButton.className = "abc";
      deleteButton.className = "abc";
      checkbox.onclick=display(i);
      deleteButton.innerText="Delete";
			newList.appendChild(checkbox);
      newList.appendChild(input_Value);
      newList.appendChild(editButton);
      newList.appendChild(deleteButton);
      deleteButton.onclick = removeItem(i);
       $("#editBtn_"+i).css("display","none");
       $("#deleteBtn_"+i).css("display","none");

        }
         
      document.getElementById("list").appendChild(newList);
       }
       function removeItem(index) {
      
          if(checkbox.checked == true){
          var x=this.parentNode;
		      var ul=x.parentNode;
		      ul.removeChild(x);
         }
         }
         function display(index) {
          if(index != ){
          if(checkbox.checked == true){
          alert(index)
         $("#editBtn_"+index).css("display","block");
         $("#deleteBtn_"+index).css("display","block");
         }
         }
         }
     </script>
</body>
</head>
</html>