graphics anaimation with class and sleep function

Creates an input button and assigns a click event to it.

HTML

<input type="button" id="button" value="Click Me" />
<div id="myDiv" width="100%" height="100%">
        <div class="redSquare" id="0"></div>
        <div class="redSquare" id="1"></div>
        <div class="redSquare" id="2"></div>
        <div class="redSquare" id="3"></div>
        <div class="redSquare" id="4"></div>
        <div class="redSquare" id="5"></div>
        <div class="redSquare" id="6"></div>
         <div class="redSquare" id="7"></div>
          <div class="redSquare" id="8"></div>
           <div class="redSquare" id="9"></div>
      </div>

CSS

div.redSquare{
   width:10px; height:10px; background-color :#FF0000; display: inline-block ;float: none;
}
div.blueSquare{
   width:10px; height:10px; background-color :#0000FF; display: inline-block ;float: none;
}

JavaScript

var onClick = function() {
    
    for(var i = 0; i <= 9 ; i++ ){
     (function(i){
       setTimeout(function(){
         document.getElementById(i).setAttribute("class","blueSquare" );
       },i*500)
     }(i))   
  }
};

$('#button').click(onClick);