jquery - 動的に挿入された要素への css の追加

Question

アスペクト比を維持するグリッドを作成しようとしています。画面全体に表示されるまで、前の要素の最後に追加する div 要素を使用してこれを行っています。Jquery を使用して動的に挿入された要素に CSS を適用しようとしましたが、最初の要素にのみ適用されます。ここに私のコードがあります。

HTML

<div id='layer_grid'>
<div id='grid'>
</div>
</div>

CSS

#grid{
background-color:#c1c1c1;
border:1px solid black;
display:inline-block;
float:left;
}

Jクエリ

for (var i=0;i<g_num;i++){
$('#grid:last').append('<div id="grid"></div>');
}
$('#grid').css({'width':gw,'height':gh});

これが私に起こったのはこれが初めてではありません。理解できません。Jquery はトップダウン プログラミングだと思っていました。誰かがそれが機能しない理由を説明し、機能する方法を提案できますか?