JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

  <header>
    <h1>ENTER A TASK BELOW</h1>
    <input type="text" id="task" />&nbsp;<img id="add" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/add-128.png" style="width: 2%">

  </header>

  <div id="incomplete-tasks">
    <h4>TO-DO LIST</h4>
    <ul id="task-to-do">

    </ul>

  </div>

JavaScript

$(document).ready(function() {

  document.getElementById("add").addEventListener("click", function() {

    var taskinput = document.getElementById("task").value;

    if (taskinput) {
      var tasktext = document.createTextNode(taskinput);
      var list = document.createElement("li");
      list.appendChild(tasktext);
      var button = document.createElement("button");
      button.setAttribute("class", "completed");
      button.innerHTML = "X";
      list.appendChild(button);
      document.getElementById("task-to-do").appendChild(list);
      document.getElementById("task").value = " ";
    } else {
      alert("Please enter a task");
    }
  });
});

$('#task-to-do').on('click', "button.completed", function(){
   $(this).closest("li").remove();
});