JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>

<title>Dynamic To-Do List</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
<script src="jquery-3.4.0.min.js"></script>

</head>

<body>
    <div class="container"> <p>

        <div contenteditable="true" id="myContent">

<form method="POST" action="..." onsubmit="return checkForm(this);">
<label for="new-task">Add</label><input id="new-task" type="text" placeholder="Task Name..."><br>
<label for="task-descr"></label><input id="task-descr" type="text" placeholder="Task Description..."><br>
<label>Date: <input type="text" size="12" placeholder="dd/mm/yyyy" name="startdate" id="startdate">
    <!--<small>(dd/mm/yyyy)</small>-->
    </label><br>
<input id="urgent" type="checkbox"><label for="urgent">Urgent</label><br>

<input type="radio" id="groceries" name="category" value="groceries">
<label for="groceries">Groceries</label>
<input type="radio" id="work" name="category" value="work">
<label for="work">Work</label>
<input type="radio" id="chores" name="category" value="other">
<label for="chores">Chores</label>
<input type="radio" id="finance" name="category" value="other">
<label for="finance">Finance</label>

<form>
    <br>
    Select your category:
    <select id="mySelect">
      <option>Groceries</option>
      <option>Work</option>
      <option>Chores</option>
      <option>Finance</option>
    </select>
    <br><br>
    <input type="button" onclick="getOption()" value="Click Me!">
    </form>
    
    <p id="demo"></p>

</form>

<!--Task Order-->

<button input type="button" onclick="getOption()" value="Click Me!">Add</button>

</form>
</p>
<h3>To Do</h3>
<ul id="incomplete-tasks">

</ul>

<h3>Completed</h3>
<ul id="completed-tasks">


</ul></div>

</div>


<script type="text/javascript" src="script3.js"></script>
<script type="text/javascript" src="reorder.js"></script>
<script type="text/javascript" src="selectmatchingdynamicfield.js"></script>


</body>

</html>

CSS

* Basic Style */
body {
  background: #fff;
  color: #333;
  font-family: Lato, sans-serif;
}
.container {
  display: block;
  width: 400px;
  margin: 100px auto 0;
}
ul {
  margin: 0;
  padding: 0;
}
li * {
  float: left;
}
li, h3 {
  clear:both;
  list-style:none;
}
input, button {
  outline: none;
}
button {
  background: none;
  border: 0px;
  color: #888;
  font-size: 15px;
  width: 60px;
  margin: 10px 0 0;
  font-family: Lato, sans-serif;
  cursor: pointer;
}
button:hover {
  color: #333;
}
/* Heading */
h3,
label[for='new-task'] {
  color: #333;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 2px solid #333;
  padding: 30px 0 10px;
  margin: 0;
  text-transform: uppercase;
}
input[type="text"] {
  margin: 0;
  font-size: 18px;
  line-height: 18px;
  height: 18px;
  padding: 10px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  font-family: Lato, sans-serif;
  color: #888;
}
input[type="text"]:focus {
  color: #333;
}

/* New Task */
label[for='new-task'] {
  display: block;
  margin: 0 0 20px;
}
input#new-task {
  float: left;
  width: 318px;
}
p > button:hover {
  color: #0FC57C;
}

/* Task list */
li {
  overflow: hidden;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
li > input[type="checkbox"] {
  margin: 0 10px;
  position: relative;
  top: 15px;
}
li > label {
  font-size: 18px;
  line-height: 40px;
  width: 237px;
  padding: 0 0 0 11px;
}
li >  input[type="text"] {
  width: 226px;
}
li > .delete:hover {
  color: #CF2323;
}

/* Completed */
#completed-tasks label {
  text-decoration: line-through;
  color: #888;
}

/* Edit Task */
ul li input[type=text] {
  display:none;
}

ul li.editMode input[type=text] {
  display:block;
}

ul li.editMode label {
  display:none;
}

JavaScript

//Document is the DOM can be accessed in the console with document.window.
// Tree is from the top, html, body, p etc.

//Problem: User interaction does not provide the correct results.
//Solution: Add interactivity so the user can manage daily tasks.
//Break things down into smaller steps and take each step at a time.


//Event handling, uder interaction is what starts the code execution.

var taskInput=document.getElementById("new-task");//Add a new task.
var taskDescrInput=document.getElementById("task-descr");
var startDateInput=document.getElementById("startdate");
var urgentInput=document.getElementById("urgent");
var groceriesInput=document.getElementById("groceries");
var workInput=document.getElementById("work");
var choresInput=document.getElementById("chores");

var addButton=document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks


//New task list item
var createNewTaskElement=function(taskString){

	var listItem=document.createElement("li");

	//input (checkbox)
	var checkBox=document.createElement("input");//checkbx
	//label
	var label=document.createElement("label");//label
	//input (text)
	var editInput=document.createElement("input");//text
	//button.edit
	var editButton=document.createElement("button");//edit button

	//button.delete
	var deleteButton=document.createElement("button");//delete button

	label.innerText=taskString;

	//Each elements, needs appending
	checkBox.type="checkbox";
    editInput.type="text";
    editInput.type="text";
    editInput.type="text";
    editInput.type="checkbox";
    editInput.type="radio";


	editButton.innerText="Edit";//innerText encodes special characters, HTML does not.
	editButton.className="edit";
	deleteButton.innerText="Delete";
	deleteButton.className="delete";



	//and appending.
   ...