JSFiddle - React, Tailwind, and code Playground

by Stephen

HTML

<HTML>
  <head>
  
  </head>
  <body>  
    <div id="divContainer">
      <div class="div">
        one
      </div>
      <div class="div">
        two
      </div>
      <div class="div">
        three
      </div>
      <div class="div">
        four
      </div>
      <div class="div">
        five
      </div>
      <div class="div">
        six
      </div>
    </div>


    <table id="table">

    </table>
    
    <p id="output">
    
    </p>
  </body>
</HTML>

CSS

div.div {
  background-color: lightyellow;
}
table {
  border: 2px solid lightgreen;
}

JavaScript

var divLists = document.getElementsByClassName('div');

window.onload = function() {
  for (i = 0; i < divLists.length; i++) {

    var divList = divLists[i];

    divList.onclick = function() {
      x(this.innerHTML);
    }
  }
};

function x(y) {
  var table = document.getElementById('table');
//  debugger;
  var Row = table.insertRow();
  var Cell = Row.insertCell(0);
  Cell.innerHTML = y;
}