JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
      <p>
        <label for="new-task">Add Item</label><input id="new-name" type="text"><input id="new-email" type="text"><input id="new-phone" type="text"> <input id="new-zip" type="text"><button>Add</button>
      </p>
      
      <h3>Todo</h3>
      <ul id="current-tasks">
        <li><label> Learn </label><button class="delete">Delete</button></li>
        <li><label>Read</label><button class="delete">Delete</button></li>
        
      </ul>

JavaScript

var nameInput = document.getElementById("new-name"); 
        var emailInput = document.getElementById("new-email").innerHTML; 
        var noInput = document.getElementById("new-phone").innerHTML; 
        var zipInput = document.getElementById("new-zip").innerHTML; 
     var taskInput = nameInput; 
    // var taskInput = nameInput + " " + emailInput + " " + noInput +  " " + zipInput;    
 //       var taskInput = nameInput.concat(emailInput);
// document.querySelectorAll("new-name, new-email, new-number, new-zip");
 

        var addButton = document.getElementsByTagName("button")[0]; //first button
        var cTasksHolder = document.getElementById("current-tasks"); //current-tasks
        var delButton= document.getElementsByClassName("delete");

//New Task List Item
var createNewTaskElement = function(taskString) {
  //Create List Item
  var listItem = document.createElement("li");
  //label
  var label = document.createElement("label");
  //button.delete
  var deleteButton = document.createElement("button");
//Each element needs modifying
    deleteButton.innerText = "Delete";
    deleteButton.className = "delete";

    label.innerText = taskString;

    //each element need  appending
      listItem.appendChild(label);
      listItem.appendChild(deleteButton);
    return listItem;
 }

 // adauga task 
 var addTask = function() {
  console.log("Add task...");
var listItem = createNewTaskElement(taskInput.value);
  //apend listItems to imcomplete taskHolder (only if task is not null)
  if(taskInput.value) {
    cTasksHolder.appendChild(listItem);
    bindTaskEvents(listItem);
  } else {
    alert("You must enter the name , the email , the phone and the zip code.");
  }

}
        var deleteTask = function() {
          console.log("Delete task...");
        var listItem = this.parentNode;
        var ul = listItem.parentNode;
        ul.removeChild(listItem);

}

var bindTaskEvents = function(taskListItem){
  console.log("Bind list item events");
    //select...