JSFiddle - React, Tailwind, and code Playground

HTML

<select >
<option value="4" >4</option>
<option value="8" >8</option>
<option value="16">16</option>
<option value="32">32</option>
<option value="64">64</option>
<option value="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?
	}
$('select').on('change',function(){
myFunction(this.value);
});
$('.container').append("<div></div>");

$(document).on('mouseenter','div',function() {

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


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