Untitled

<html>

<head>
<style>
.container {
	width: 160px;
	height: 160px;
	background-color: grey;
}
.container .cell {
	float: left;
	width: 40px;
	height: 40px;
	background-color: lightblue;
}
#go {
	width: 50px;
	height: 50px;
	border-radius: calc(50px/2);
	background-color: green;
	margin-bottom: 5em;
}
</style>
</head>
<body>
<div id='go'></div>
<div class='container'>
</div>
</body>
<script>
var numberArray = [
    0,
    1,
    0,
    1,
    0,
    1,
    0,
    1,
    0,
    1,
    0,
    1,
    0,
    1,
    0,
    1,
]

numberArray.forEach(function(n, i) {
	var container = document.querySelector('.container');
	var cell = document.createElement('div');
	cell.classList.add('cell');
	cell.innerHTML = numberArray[i];
	container.appendChild(cell);
});

var go = document.getElementById('go');
go.addEventListener('click', function(e) {
	var cells = Array.prototype.slice.call(document.querySelectorAll('.cell'));
	cells.forEach(function(c) {
		c.style.backgroundColor = 'red';
	})
});
</script>

</html>