for example, dynamically create 10 span tag loops in div
<div class="square">
</div>
<script>
var str="<span></span>";
for(var i=0;i<10;iPP){
$(".square").append(str);
}
</script>.
.square{
width:400px;
height: 200px;
border:1px solid red;
position: relative;
}
.square span{
width:10px;
height:10px;
background:blue;
position: absolute;
bottom:0;
}
.square span:nth-child(2){
left:12px;
}
.square span:nth-child(3){
left:24px;
background:red;
}
.square span:nth-child(4){
left:36px;
} 
it seems that the span created are all stacked together. Now I want to move each tag to the left, and the tag behind it and overlay the previous movement distance. I use css to move each tag left, but this is too cumbersome. It is not exhausting to cycle around to generate more than 30 tags. How should js dynamic write forEach? Solve?