Write CSS from jQuery within a for loop
<p>My script needs to dynamically create a stylesheet in the  section of the page (rather than put inline styles on each element, because I need to override these styles with media queries later on).</p>

<p><strong>The Code</strong></p>

<pre><code>for (var i=0; i&lt;theElements.length; i++){

    $(theElements[i]).not('.responsive-wrap').each(function(i, elem){
        var theWidth = $(this).width();
        var parentWidth = $(this).parent().width();

        $(this).addClass('element' + [i]);

        $("#dynamicStylesheet").text('.element' + [i] + ' {max-width: ' + theWidth + 'px;}');
    });
}
</code></pre>

<p><strong>The main question is:</strong> </p>

<p>This completely overrides the text in the <code>#dynamicStylesheet</code> each run of the loop (so when I load the page there is only one rule for <code>.element22</code>). How can I make it ADD the text without overwriting?</p>

<p><strong>Sub-questions for bonus points:</strong> </p>

<ul>
<li><p>This works for the most-part, but ONLY when <code>[i]</code> is in square
brackets. Why is this?</p>

<p>Do I need the <code>for loop</code> here, or is <code>.each(function(){})</code> essentially
creating a <code>for loop</code> anyway? There's another <code>each</code> function below this one inside the <code>for loop</code> that I haven't posted to keep it succinct.</p></li>
</ul>
