JSFiddle - React, Tailwind, and code Playground

by Timoleon Pagounas

HTML

<input type="text" id="input-width">
<button id="genBtn">
Generate
</button>
<hr>
<div class="cropper-dragger"></div>

CSS

.dashed-x{
  background-color:orange;
  min-width:20px;
  height:20px;
  padding:5px;
  margin:2px;
  display:inline-block;
  border:2px green solid;
}

JavaScript

$(document).ready(function(){
		$('#input-width').keyup(function(e){
    
    	// check if the entered value is a number, else we won't execute the for-loop
    	var xds = parseInt($("#input-width").val());
      if(!isNaN(xds)){
      	//if you want to reset content of .cropper-dragger div we need the below line
        $('.cropper-dragger').html('');
        
        // generate span.dashes-x and append them
      	for(var i = 0; i < xds; i++){
        	var $newTile = '<span class="dashed-x"></span>';
          $('.cropper-dragger').append($newTile);
        }
      }
    });
});