JSFiddle - React, Tailwind, and code Playground

HTML

<select>
<option onClick="myFunction(4);" >4</option>
<option onClick="myFunction(8);" >8</option>
<option onClick="myFunction(16);">16</option>
<option onClick="myFunction(32);">32</option>
<option onClick="myFunction(64);">64</option>
<option onClick="myFunction(128);">128</option>

</select>
<p id="results"></p>

<section class="container"></section>

CSS

div {
    background-color: #FF0000;
    border-radius: 10px;
    float: left;
    height: 80px;
    margin: 5px;
    width: 80px;
}
.container{
	width:800px;
	margin-left:200px;}

JavaScript

var run = true;
var result = 0;

function myFunction(volume){
	for(var i = 1; i<= volume; i++)
		$('.container').append("<div></div>");	//why it is not working?
	}

$('.container').append("<div></div>");

$('div').mouseenter(function() {
	if (run){
	$(this).hide(3000, function() {
	result++;
    run = false;
	rewrite();
	});
	}
		
	});


function rewrite(){
	document.getElementById('results').innerHTML = result;
	}