how can i apply style through javascript DOM in multiple <div> blocks
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCKTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
div
{
position:absolute;
width:100px;
height:100px;

-webkit-transition: 1s ease 0s;

}
div:hover
{
width:100px;
height:100px;
border-radius:100px;
-webkit-transform:matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}

    
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body  bgcolor="black" onload="bbbl()"&gt;

&lt;div id="a"&gt;&lt;/div&gt;
&lt;div id="b"&gt;&lt;/div&gt;
&lt;div id="c"&gt;&lt;/div&gt;
&lt;div id="d"&gt;&lt;/div&gt;
&lt;div id="e"&gt;&lt;/div&gt;
&lt;div id="f"&gt;&lt;/div&gt;
&lt;div id="g"&gt;&lt;/div&gt;
&lt;div id="h"&gt;&lt;/div&gt;
&lt;div id="i"&gt;&lt;/div&gt;
&lt;div id="j"&gt;&lt;/div&gt;
&lt;div id="k"&gt;&lt;/div&gt;
&lt;div id="l"&gt;&lt;/div&gt;
&lt;div id="m"&gt;&lt;/div&gt;
&lt;div id="n"&gt;&lt;/div&gt;
&lt;div id="o"&gt;&lt;/div&gt;
&lt;div id="p"&gt;&lt;/div&gt;
&lt;div id="q"&gt;&lt;/div&gt;
&lt;div id="r"&gt;&lt;/div&gt;
&lt;div id=""&gt;&lt;/div&gt;
&lt;div id="t"&gt;&lt;/div&gt;
&lt;div id="u"&gt;&lt;/div&gt;
&lt;div id="v"&gt;&lt;/div&gt;
&lt;div id="w"&gt;&lt;/div&gt;
&lt;div id="x"&gt;&lt;/div&gt;
&lt;div id="y"&gt;&lt;/div&gt;
&lt;div id="z"&gt;&lt;/div&gt;
&lt;div id="1"&gt;&lt;/div&gt;
&lt;div id="ba"&gt;&lt;/div&gt;
&lt;div id="ca"&gt;&lt;/div&gt;
&lt;div id="da"&gt;&lt;/div&gt;
&lt;div id="ea"&gt;&lt;/div&gt;
&lt;div id="fa"&gt;&lt;/div&gt;
&lt;div id="ga"&gt;&lt;/div&gt;
&lt;div id="ha"&gt;&lt;/div&gt;
&lt;div id="ia"&gt;&lt;/div&gt;
&lt;div id="ja"&gt;&lt;/div&gt;
&lt;div id="ka"&gt;&lt;/div&gt;
&lt;div id="la"&gt;&lt;/div&gt;
&lt;div id="ma"&gt;&lt;/div&gt;
&lt;div id="na"&gt;&lt;/div&gt;
&lt;div id="oa"&gt;&lt;/div&gt;
&lt;div id="pa"&gt;&lt;/div&gt;
&lt;div id="qa"&gt;&lt;/div&gt;
&lt;div id="ra"&gt;&lt;/div&gt;
&lt;div id="sa"&gt;&lt;/div&gt;
&lt;div id="ta"&gt;&lt;/div&gt;
&lt;div id="ua"&gt;&lt;/div&gt;
&lt;div id="va"&gt;&lt;/div&gt;
&lt;div id="wa"&gt;&lt;/div&gt;
&lt;div id="xa"&gt;&lt;/div&gt;
&lt;div id="ya"&gt;&lt;/div&gt;
&lt;div id="za"&gt;&lt;/div&gt;
&lt;script&gt;

var color = ["orange", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "white", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green","navy","orange", "white", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "white", "red"];
var id = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z","1", "ba", "ca", "da", "ea", "fa", "ga", "ha", "ia", "ja", "ka", "la", "ma", "oa", "pa", "qa", "ra", "sa", "ta", "ua", "va", "wa", "xa", "ya", "za"];
var ran3=Math.floor(Math.random() * 1200);
 var ran4=Math.floor(Math.random() * 500);
function bbbl()
{

for(i=0;i&lt;=51;i++)
{
 var ran=Math.floor(Math.random() * 1200);
 var ran1=Math.floor(Math.random() * 500);
document.getElementById(id[i]).style.backgroundColor=color[i];
document.getElementById(id[i]).style.left=ran+'px';
document.getElementById(id[i]).style.top=ran1+'px';
document.getElementById(id[i]).style.opacity="0.3";

}
}

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>I want to create 52 <code>&lt;div&gt;</code> blocks inside my web page randomly. I am not getting desired output. The HTML DOM is not working. Only 20 <code>&lt;div&gt;</code> blocks are working.<br>
Here I have used random function to set a different position to each individual <code>&lt;div&gt;</code>. The desired output should be 52 different colored blocks at different positions. But the result is different. Only blocks are in output.<br>
Can I do this in a different way?</p>