Prepend output to DIV with Javascript and a couple other questions

Question

I am working on form. Now the form it's self works great, no issues with it. But I am trying to implement a history log of previous results. I have been able to get it working in a basic sense, when an entry is output to the div, it will appear at the top, than the second one will appear underneath (appending). This is my first issue, I would like most recent entry to appear at the top with the oldest at the bottom in descending order (prepending).

I just cant quite get it to work.

The HTML:

<p>History log:</p><br><div id="SecondDIVOutput" style="white-space: 
pre-wrap"></div> 

The script:

function convertOutput(){
   var output = document.getElementById("output").value;
       SecondDIVOutput.innerHTML+=   "<ul><li><time id='time'></time><br /> 
<br />"+ output +"<br /><br /><span class='close'>&times;</span></li></ul>";
}

I am sure it'll be something really simple I am missing to make this work, but I have been at a loss trying to get it working.

I have two other questions also. I have been also trying to implement a timestamp.

The time stamp works, BUT, will only appear on the first output, the rest will not have the timestamp

Here's the script for the timestamp:

var MONTH_NAME = ['January', 'Febuary', 'March', 'April', 'May', 'June',
              'July', 'August', 'September', 'October', 'November', 
'December'];
function showTime() {
function twoDigit(n) {
    return ('0' + n).slice(-2);
}
function iso8601(date) {
    return date.getFullYear() +
           '-' + twoDigit(1 + date.getMonth()) +
           '-' + twoDigit(date.getDate()) +
           'T' + twoDigit(date.getHours()) +
           ':' + twoDigit(date.getMinutes());
}
function en_US(date) {
    var h = date.getHours() % 12;
    return MONTH_NAME[date.getMonth()] +
           ' '  + date.getDate() +
           ', ' + date.getFullYear() +
           '<br />' + (h == 0 ? 12 : h) +
           ':'  + twoDigit(date.getMinutes()) +
           ' ' + (date.getHours() < 12 ? 'am' : 'pm');
}

var timeEl = document.getElementById('time');
if (timeEl !== null) {
    var now = new Date();
    timeEl.innerHTML = en_US(now);
    timeDiv.setAttribute('datetime', iso8601(now));
   }
};
setInterval(showTime, 1000);

I would love to make this work as it would really look good, and be useful for the history log.

Lastly, I have really been trying (hoping) to make each output a box than can be removed with a close button.

I have been able to make this work to a degree, the output will appear in a box, close button and all, but the button wont function with the script.

The script for it:

var closebtns = document.getElementsByClassName("close");
var i;

for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}

I have made a Fiddle with all related code in it, though I couldn't get all of the scripting to run properly within the fiddle. It does work if saved as a .html and opened though. Sorry I am still new to all this and learning. On this last one, is this even possible? I would be really happy if I can get this working.

Thanks so much, I know this is a lot in terms of questions, but my goal is to have the output prepend on top of the old, with a timestamp for each entry, and lastly to make any single entry able to be removed or deleted. I am trying to solve this using vanilla JavaScript.

UPDATE:

I am trying to use the convertOutput() like has been suggested below, to get the function to work, but I am not sure how ti properly call it.

SCRIPT:

function convertOutput(){

convertOutput.addEventListener('close', function() {
this.parentElement.style.display = 'none';
}
});

var output = document.getElementById("output").value;
var li = document.createElement('li');
li.className = "containedboxes";
var dateTime = todayDateTime();

li.innerHTML = "<time id='time'>" +  dateTime +"</time><br /> <br />"+ 
output +"<br /><br /><span class='close'>&times;</span>";
   document.getElementById('outputListItem').prepend(li);
}

Answer 1

To answer your first question, you can use prepend() to attach contents to the beginning of the element.

function prepend() {
  let div = document.createElement('div');
  div.innerHTML = new Date().getTime();
  document.getElementById('your_id').prepend(div);
}

<div id="your_id"></div>
<button onclick="prepend()">Do Prepend</button>

Answer 2

To answer your second question with timeclock, you had a typo by using timeDiv.setAtt... as timeDiv is not declared. Please find the corrected code

var MONTH_NAME = ['January', 'Febuary', 'March', 'April', 'May', 'June',
  'July', 'August', 'September', 'October', 'November',
  'December'
];

function showTime() {
  function twoDigit(n) {
    return ('0' + n).slice(-2);
  }

  function iso8601(date) {
    return date.getFullYear() +
      '-' + twoDigit(1 + date.getMonth()) +
      '-' + twoDigit(date.getDate()) +
      'T' + twoDigit(date.getHours()) +
      ':' + twoDigit(date.getMinutes());
  }

  function en_US(date) {
    var h = date.getHours() % 12;
    return MONTH_NAME[date.getMonth()] +
      ' ' + date.getDate() +
      ', ' + date.getFullYear() +
      '<br />' + (h == 0 ? 12 : h) +
      ':' + twoDigit(date.getMinutes()) +
      ' ' + (date.getHours() < 12 ? 'am' : 'pm');
  }

  var timeEl = document.getElementById('time');
  if (timeEl !== null) {
    var now = new Date();
    var div = document.createElement('div');
    div.innerHTML = en_US(now);
    div.setAttribute('datetime', iso8601(now));
    timeEl.append(div);
  }
};
setInterval(showTime, 1000);

<div id="time"></div>

Answer 3

To answer your third question, please try the code below

(function() {
  let elementsArray = document.querySelectorAll(".close");

  elementsArray.forEach(function(elem) {
    elem.addEventListener("click", function() {
      this.classList.add('hide');
    });
  });
})();

.close {
  background: #ccc;
  padding: 1em;
  margin: 1em;
}

.hide {
  display: none;
}

<div class="close">
  Text 1
</div>

<div class="close">
  Text 2
</div>

<div class="close">
  Text 3
</div>

Answer 4

Answer to fist question

SecondDIVOutput.innerHTML+=   "<ul><li><time id='time'></time><br /><br />"+ output +"<br /><br /><span class='close'>&times;</span></li></ul>";

Changed to

SecondDIVOutput.innerHTML =   "<ul><li><time id='time'></time><br /> <br />"+ output +"<br /><br /><span class='close'>&times;</span></li></ul>" + SecondDIVOutput.innerHTML;

Note the += been changed to = and +SecondDIVOutput.innerHTML; added to the end. Also be aware this method is creating a new <ul> per item inserted. Correct solution at bottom.

Second Question

The time stamp issue is due to var timeEl = document.getElementById('time'); returning the first matching element in the DOM and you have multiple id="time" in DOM.

Last question

Each time you use SecondDIVOutput.innerHTML += ... all existing events within the SecondDIVOutput elements are lost. After calling convertOutput() you should run that addEventListener() loop immediately after it

Now the correct way of adding items to the list:

HTML:

<p>History log:</p><br><div style="white-space:pre-wrap"><ul id="outputListItem"></ul></div> 

JS:

function convertOutput(){
   var output = document.getElementById("output").value;
   var li = document.createElement('li');
   var currentTime = getCurrentTime();

   li.innerHTML = "<time id='time'>" + currentTime + "</time><br /> <br />"+ output +"<br /><br /><span class='close'>&times;</span>";
   document.getElementById('outputListItem').prepend(li);
}

function getCurrentTime() {
    var today = new Date();
    var HHMMSS = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    return HHMMSS;
}

You have to create a function to get the currentTime() bear in mind <time id='time'> needs to be unique if you want to dynamically change this as a timer.

See https://jsfiddle.net/h0xucobp/ for working example