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

function grab(id) { 
  return document.getElementById(id); 
}

var when = function() {
  return function(obj, event, fn) {
    obj.addEventListener(event, fn, false);
  }; 
}();

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


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< fruits.length; i++){
     demolist.innerHTML += fruits[i].Name + " " + fruits[i].Note + "<br>";
   }
});

var fruits = [];


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

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

function pushArray(){
  var nt = new Task(toDo.value, "No note yet");
  fruits.push(nt);
  var task = document.createElement("div");
  task.setAttribute("class", "taskitem");
  task.innerHTML = nt.Name;
  var t = document.createElement("input");
  t.setAttribute("class", "tasknote");
  task.appendChild(t);
  when(t, "keypress", function(event){
  if (event.key == "Enter" || event.keyCode == 13) {
    nt.Note = t.value;
    this.parentNode.innerHTML = nt.Name + " " + nt.Note;
    t.value = "";
  }
});

  result.appendChild(task);
  console.log(fruits);
}