thoubleshooting to applying css.

thoubleshooting to applying css.

here I am making 10 divs and applying amit class, that's working fine showing required output but when I am applying top left position random and random color it's not showing correct output.

here my code.

    var randval=Math.round(Math.random()*100);

    for(i=0;i<10;i++){
        mythumb=new thumbnail();
        var r=Math.round(Math.random()*99);
        var g=Math.round(Math.random()*99);
        var b=Math.round(Math.random()*99);
        var color=('#'+r+''+g+''+b);
        var left=Math.round(Math.random()*300);
        var top=Math.round(Math.random()*300);
       
        $('.maindiv').append("<div data="+i+" class='amit' id='thumb'+"+i+" > div </div>");
        $('#thumb'+i).css({'left':(left+'px'),'top':(top+'px'),'background-color':color}); <<< this is not working
        console.log(i+'   '+randval+'    left='+left+'  top='+top+'   divobject='+$('#thumb'+i)); <<everything is showing in output nothing is undefined or null
    }   


//here my css
.amit{
        width:100px;
        height:100px;
        border:#000 1px solid;
        position:absolute;
    }

.maindiv{
        width:600px;
        height:500px;
        background-color:#CC0;
        position:absolute;
    }