title: Outputting an object to a page that keeps close function
body: <p>I posted this <a href="https://stackoverflow.com/questions/56814303/prepend-output-to-div-with-javascript-no-jquery-and-a-couple-other-questions">question</a> before, among others. But it was suggested I need to ask a more specific or focused question.</p>
  
  <p>I am working on an output history log on a single page. And I want to make it so each output it's self is contained in box object that can be closed or deleted individually. Like <a href="https://jsfiddle.net/CodingGuy1984/vmehkuy3/1/" rel="nofollow noreferrer">this.</a></p>
  
  <p>Now I have managed to get everything working to the point where it will nicely output to a box with a close button. However the close button it's self will not function in this case.</p>
  
  <p>So, I am trying to output it like this...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt;History log:&lt;/p&gt;&lt;br&gt;&lt;div style="white-space:pre-wrap"&gt;&lt;ul 
  id="outputListItem" class="boxcontainer"&gt;&lt;/ul&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>SCRIPT:</p>
  
  <pre><code>document.getElementById("Add").onclick = function(e) {
  convertOutput();
  }
  
  function convertOutput(){
  //this is the part I have been trying to get working
  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 = "&lt;time id='time'&gt;" + dateTime +"&lt;/time&gt;&lt;br /&gt; &lt;br /&gt;"+ output 
  +"&lt;br /&gt;&lt;br /&gt;&lt;span class='close'&gt;&amp;times;&lt;/span&gt;";
     document.getElementById('outputListItem').prepend(li);
  }
  </code></pre>
  
  <p>And the script to close the box:</p>
  
  <pre><code>var closebtns = document.getElementsByClassName("close");
  var i;
  
  for (i = 0; i &lt; closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
  this.parentElement.style.display = 'none';
  });
  }
  </code></pre>
  
  <p>It was suggested to me on the last question I posed I should  use convertOutput() right after addEventListener() loop immediately after it. If this is how you do it, i am still quite new to JavaScript, so not sore how to properly do this. I created a <a href="https://jsfiddle.net/CodingGuy1984/a7nh4sgc/7/" rel="nofollow noreferrer">fiddle</a> for this also, but for some reason I can't get the script to run properly in the fiddle, But all the code is there to see.</p>
  
  <p>I am looking to solve this using vanilla JavaScript.</p>