adding specific number of html elements incide a div

by Timoleon Pagounas

HTML

<input type="text" id="input-width" placeholder="add the number of spans">
<hr>
<div class="cropper-dragger"> 
 <div class="cropper-dashed.dashed-v"></div> 
  <div class="cropper-dashed.dashed-h"></div> 
   <div class="cropper-face"></div> 
</div>

CSS

.dashed-x{
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  height:60%;
  padding:0;
  display:inline-block;
  border-right:1px gray dotted;
}
.cropper-dragger{
  background-color:white;
  border:1px black solid;
  padding: 0;
  height:200px;
}
.cropper-dashed.dashed-v, .cropper-dashed.dashed-h, .cropper-face{
  background-color:red;
  border:1px black solid;
  padding: 0;
  width:100%;
  height:20px;
}

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()) /5;
      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 = 1; i < xds; i++){
        	var $newTile = '<span class="dashed-x"></span>';
          $('.cropper-dragger').append("<span class='dashed-x' > " + i.toString() + "</span>")
        }
      }
  setInterval(function() {
	$(".cropper-dashed.dashed-h").remove();
	$(".cropper-dashed.dashed-v").remove();
	$(".dashed-x").insertBefore(".cropper-face");
	var tileWidth = 5/ $("#input-width").val();
        $(".dashed-x").width($(".dashed-x").parent().width() *tileWidth);
	},200);
    });
});