Add html elements randomly inside rows

I have a large grid, ment for a time line view. What I want is that the next divs are randomly added to the rows (not all rows), so that the grid is pretty filled with colored boxes. The divs are:

    <div class="bar ganttRed" id="b4" style="width: 330px;">
        <div class="label" style="color: rgb(191, 191, 191); float: left; margin-left: 23.7px;"> 2836DE
        </div>
    </div>

and

    <div class="bar ganttGreen" id="b6" style="width: 66px;">
        <div class="label" style="color: rgb(61, 61, 61); float: left; margin-left: 14px;"> 2142 FG
        </div>
    </div>

I just do not know how this should be done.

And check out my Jsfiddle for viewing the html grid.