JSFiddle - React, Tailwind, and code Playground

by sgpascoe

HTML

<div id="comboContainer">
  <span id="FirstPosition">
    text one. text two
  </span>
<div id="SecondLine">
  <preview id="SecondPosition">
    ‪text three
  </preview>
</div>
<preview id="ThirdLine">
  <span id="ThirdPosition">text five.</span>
  <span id="FourthPosition">text six</span>
</preview>
</div>

CSS

div[id*="comboContainer"] {
  border: solid;
  padding: 10px;
  width: 150px;
  float: left;
}

JavaScript

var Text1 = document.getElementById("FirstPosition");
var Text2 = document.getElementById("SecondPosition");
var Text3 = document.getElementById("ThirdPosition");
var Text4 = document.getElementById("FourthPosition");

var Arr1 = new Array('R01', 'R02', 'R03', 'R04', 'R05');
var Arr2 = new Array('A1', 'B2', 'C3', 'D4', 'E5');
var Arr3 = new Array('ab', 'ac', 'ad', 'ae', 'af', 'ag', 'ah', 'ai', 'aj', 'ak');
var Arr4 = new Array('xyz', 'abc');

var iteration = 0;

for (let a of Arr1) {
  for (let b of Arr2) {
    for (let c of Arr3) {
      for (let d of Arr4) {
        console.log(a, b, c, d);
        iteration++;
        var div = document.getElementById('comboContainer'),
          clone = div.cloneNode(true);
        clone.id = "comboContainer" + iteration;
        Text1.textContent = "I am box number " + iteration +" "+ a;
        Text2.textContent = b;
        Text3.textContent = c;
        Text4.textContent = d;
      }
      document.body.appendChild(clone);
    }
  }
}