JSFiddle - React, Tailwind, and code Playground

HTML

<title>Jan Wessels | Designer</title>
 
  <body>
<!--
    <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>  
    </div>
-->
    <hr>
    <div class="byronContainer" style="background-color: #eee;">
    Add Item: <input id="userName" type="text"><input id="email" type="text"><input id="phone" type="text"><input id="zip" type="text"><button id="add">Add</button>
      <ul id="toDoList">
   
      </ul>
    </div>
    <script src="scripts.js"></script>

JavaScript

//Gets variables for existing HTML input elements
var userName = document.getElementById('userName');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var zip = document.getElementById('zip');
var add = document.getElementById('add');
var toDoList = document.getElementById('toDoList');
var inputArray = [ userName, email, phone, zip ];

var deleteButton;

//function for when "add" button is clicked
add.onclick = function() {
    //for loop to check if an input box is empty, then don't build list item, if it has value, then build list item
    for ( var i = 0; i < inputArray.length; i += 1 ) {
      if (inputArray[i].value === '' || inputArray[i].value === ' ' || inputArray[i].value === null) {
        return false; 
      }
        else {
          //create delete button
          deleteButton = document.createElement("button");                // Create a <button> element
          var buttonText = document.createTextNode("Delete");            // Create a text node for button called "Delete"
          deleteButton.appendChild(buttonText);                         // Append the "Delete" text to <button>
          
           //create text value from user input 
          var node = document.createElement("li");                           // Create a <li> node
          var textnode = document.createTextNode(inputArray[i].value);      // Create a text node
          node.appendChild(textnode);                                      // Append the text to <li>
  
           //add <li> element with text value and delete button 
          document.getElementById("toDoList").appendChild(node);     // Append <li> to <ul> with id="toDoList"
          node.appendChild(deleteButton);                            // Append the Delete button just created to the <li> element
           
           //assign id to list element
          var liId = 'list' + document.getElementsByTagName("li").length;  //creates a unique id name for li element
 ...