JSFiddle - React, Tailwind, and code Playground

HTML

<input id="todo">

<div id="demo"></div>

<button id="btn">SHOW ARRAY</button>
<div id="demolist"></div>

CSS

ul {
  border: 2px solid red;
  margin-top: 10px;
}

li {
  background: #ccc;
}

#demo {
  width: 300px;
  min-height: 400px;
}

JavaScript

//getElementByID quicker
function grab(id) {
  return document.getElementById(id);
}
//addeventlistener quicker
var when = function() {
  return function(obj, event, fn) {
    obj.addEventListener(event, fn, false);
  };
}();
//create elements, set their attribute and innerHTML quicker
function make(el, type, name, content) {
  var x = document.createElement(el);
  x.setAttribute(type, name);
  x.innerHTML = content;
  return x;
}


/*****************************************************/

var toDo = grab("todo");
var result = grab("demo");
var demolist = grab("demolist");
var button = grab("btn");

when(toDo, "keypress", function(event) {
  if (event.key == "Enter" || event.keyCode == 13) {
    pushArray();
    toDo.value = "";
  }
});

when(button, "click", function(event) {
  demolist.innerHTML = "";
  for (i = 0; i < taskArray.length; i++) {
    demolist.innerHTML += taskArray[i].Name + " " + taskArray[i].Note + "<br>";
  }
});

var taskArray = [];

/*********************************************************/

function Task(name, note) {
  this.Note = note;
  this.Name = name;
  this.completed = false;
}

function pushArray() {
  var nt = new Task(toDo.value, "No note yet");
  taskArray.push(nt);
  displayArray(result, nt.Name);
  appendNote(result, nt);
}

function displayArray(x, obj) {
  var task = make("div", "class", "taskitem", obj);
  x.appendChild(task);
}

function appendNote(el, obj) {
  var t = make("input", "class", "tasknote");
  el.appendChild(t);
  when(t, "keypress", submitNote.bind(null, obj, t));
}

function submitNote(newTask, theInput) {
  if (event.key == "Enter" || event.keyCode == 13) {
    newTask.Note = theInput.value;
    var n = make("div", "class", "hasNote", newTask.Note);
    var t = theInput;
    t.parentNode.insertBefore(n, t.nextSibling);
    t.parentNode.removeChild(t);
    when(n, "dblclick", function() {
      n.parentNode.insertBefore(t, n.nextSibling);
      n.parentNode.removeChild(n);
    });
  }
}