Jquery append alignment problem

Jquery append alignment problem

The below code is perfectly fine. But i would like to display number next to bar level. But now it's coming below the each bar. Please help me with this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>User Display</title>

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>

<style type="text/css">

#data
{
margin-left:auto;
margin-right:auto;
width:36%;
background-color:#b0e0e6;
margin-top:100px;
               
}

</style>


<script type="text/javascript">



var myarr = new Array(40,50,10,40,90,100,70,4,80,20);

function datafun()
{

                var barcolor;
                $('<div>Raj kumar </div>').css({marginBottom:30,fontSize:20,color:"balck",textDecoration:"underline"}).appendTo('#data');
                for(var i=0;i<10;i++)
                {
                                                if(myarr[i]<=30)
                                                {
                                                                barcolor =  "#F00";
                                                }
                                                else if(myarr[i]>=31 && myarr[i]<=60)
                                                {
                                                                barcolor =  "#666";
                                                }
                                                else if(myarr[i]>=61 && myarr[i] <=80)
                                                {
                                                                barcolor = "#30F";
                                                }
                                                else if(myarr[i]>=81 && myarr[i]<=100)
                                                {
                                                                barcolor =  "#090";
                                                }
                                               
                                               
                               
                  $('<div><div id="'+i+'" style="height:25px;"></div>').css({marginTop:2, width: myarr[i]*2, background:barcolor}).appendTo('#data');
                 
                 
                  $('<div style="clear:both;">'+i+'</div></div>').css({marginTop:0}).appendTo('#data');
               
                }
               
               
}

</script>


</head>
<body onload="datafun();">



<div id="data"></div>



</body>
</html>