JSFiddle - React, Tailwind, and code Playground

by Travis Harris

HTML

<input type='number' value='20' id='lines' />
<div class='lines'>
	<div class='l l-1'>1</div>
	<div class='l l-2'>2</div>
	<div class='l l-3'>3</div>
	<div class='l l-4'>4</div>
	<div class='l l-5'>5</div>
	<div class='l l-6'>6</div>
	<div class='l l-7'>7</div>
	<div class='l l-8'>8</div>
	<div class='l l-9'>9</div>
	<div class='l l-10'>10</div>
	<div class='l l-11'>11</div>
	<div class='l l-12'>12</div>
	<div class='l l-13'>13</div>
	<div class='l l-14'>14</div>
	<div class='l l-15'>15</div>
	<div class='l l-16'>16</div>
	<div class='l l-17'>17</div>
	<div class='l l-18'>18</div>
	<div class='l l-19'>19</div>
	<div class='l l-20'>20</div>
</div>

CSS

.l{
  display:none;
}

JavaScript

$('#lines').change(function(){
	showLines(parseInt($(this).val()));
});
var line_timers = {};
function showLines(lines){
    var container = 'lines';
    var t = 1000;
    for(var i=1;i<=20;i++) {
    	var selector = '.'+container+' .l.l-' + i;
      clearTimeout(line_timers[selector]);
      if(i<=lines){
      	$(selector).show(0);
        line_timers[selector]=setTimeout((function(x){
        	return function(){
          	$(x).hide(0);
          }
        })(selector),t);
      } else {
      	$(selector).hide(0);
      }
    }
}