JSFiddle - React, Tailwind, and code Playground

by Yomi Eluwande

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.min.css">
<div class="container">
  <div id="target" class="columns"></div>
  <button onclick="clickToInsertContent()" class="button is-primary">Insert Column</button>
</div>

JavaScript

const container = document.getElementById("target")
const getnew= document.getElementById("new")

function insertContent() {
	container.innerHTML = `
  	<div class="column" style="background-color: red">1</div>
    <div class="column" style="background-color: blue">2</div>
  `
}

let colorarr = [
	'green',
  'orange',
  'brown',
  'grey',
  'yellow',
  'violet',
  'indigo',
  '#39464E',
  '#4671fb',
  '#0E8160',
  '#D13434'
]

let randomc = colorarr[Math.floor(Math.random()*colorarr.length)];

let num = 2
function clickToInsertContent () {
	for (let i = 3; i < 13; i++) {
  	num++
    container.insertAdjacentHTML('beforeend', '<div class="column" id="new">' + num + '</div>');
    getnew.style.backgroundColor = randomc
  }
}
insertContent()