JSFiddle - React, Tailwind, and code Playground

HTML

<h1>ToDo-List</h1> Title:
<input id="title" type="text" placeholder="Tap to enter a new item&hellip;">
<br> Details:
<input id="detail" type="text" placeholder="Details of new item&hellip;">
<br>
<button type="button" id="additem">
    Add
</button>
<button class="button" type="button" id="deleteitems">
    Delete Checked
</button>
<button class="button" type="button" id="deleteAllItems">
    Delete All
</button>

<ul id="todo-list-container">
</ul>

CSS

h1 {
    color: white;
    text-align: center;
    background-color: rgb(128, 128, 128);
    font-weight: bold;
}

body {
    font-family: helvetica, sans-serif;
    font-size: 16px;
}

form {
    text-align: center;
    border-top: thin dotted;
    padding-top: 1em;
    border-bottom: thin dotted;
    padding-bottom: 1em;
}

ul {
    display: table;
    margin: 0 auto;
}

input {
    text-align: center;
    width: wrap_content;
    line-height: 1.4em;
    border: 2px solid rgb(128, 128, 128);
    border-radius: 5px;
    padding: 10px 17px;
    font-size: 14px;
}

button {
    font-size: 14px;
    border-radius: 5px;
    background-color: rgb(128, 128, 128);
    padding: 10px;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.deleteall {
    position: relative;
}

JavaScript

var title = document.getElementById("title");
var detail = document.getElementById("detail");
var addNewItem = document.getElementById("additem");
var deleteItems = document.getElementById("deleteitems");
var deleteAllItems = document.getElementById("deleteAllItems")
var toDoListContainer = document.getElementById("todo-list-container");

var toDoListData = [];

addNewItem.addEventListener('click', function(event) {
    var titleText = title.value;
    var detailText = detail.value;

    // If titleText, or detailText doesn't have any
    // text in it, then return; don't do anything
    if (!titleText || !detailText) return;

    toDoListData.push({
        title: titleText,
        detail: detailText
    });
    refreshUIbasedOnArray();
    title.value = '';
    detail.value = '';
});

deleteItems.addEventListener('click', function(event) {
    for (var i = 0; i < toDoListData.length; i++) {
        if (toDoListContainer.children[i].firstElementChild.checked) {
            toDoListData[i] = null;
        }
    }
	refreshUIbasedOnArray();
});

deleteAllItems.addEventListener('click', function(event) {
    // Empty 'toDoListData' array
    toDoListData = [];
    refreshUIbasedOnArray();
});

function refreshUIbasedOnArray() {
    // Remove everything from 'toDoListContainer',
    // then repopulate it from the 'toDoListData' array

    toDoListContainer.innerHTML = "";

    // Reason for loops through the array backwards,
    // see: http://stackoverflow.com/a/18165553/4861207 
    for (var i = toDoListData.length; i--;) {
        if (toDoListData[i] === null) {
            toDoListData.splice(i, 1);
        }
    }

    for (var i = 0; i < toDoListData.length; i++) {
        var listWrapper = document.createElement("li");
        var checkBox = document.createElement("input");
        var text = document.createElement("div");

        checkBox.type = 'checkbox'

        text.innerHTML = toDoListData[i].title;

        listWrapper.appendChild(checkBox);
       ...