JSFiddle - React, Tailwind, and code Playground

by Andry Zirka

HTML

<input class="corners" type="range" min="1" max="60" step="1" value="1">
	<span>show</span>
  <div class="addBlock">
    <div class="minBlock"></div>
  </div>

CSS

.addBlock{
  height: 100px;
  width: 100%;
  border: 1px solid #000;
}

.minBlock{
  float: left;
  width: 20px;
  height: 20px;
  background-color: red;
  border: 1px solid #000;
}

JavaScript

var corners = $('.corners'),
	 	 num = $('span');
     var a = corners.val();
     nov = showResalt + 2;
$(function(){
	num.text(a);
	$('.corners').change(function(){
  	a = corners.val();
		console.log(a + "  =a");
		num.text(a);	
   })
})  
   var showResalt = Number (a);   
   console.log( showResalt + ' = showResalt');
   console.log(nov + "  = nov");
     
 $.fn.duplicate = function(count, cloneEvents) {
		var tmp = [];
		for ( var i = 0; i < count; i++ ) {
			$.merge( tmp, this.clone( cloneEvents ).get() );
		}
		return this.pushStack( tmp );
	};
  
  var block = $('.addBlock'),
  		minBlock = $('.minBlock');
  
  minBlock.duplicate(showResalt).appendTo('.addBlock'); // showResalt должно равняться переменной a