Delay each iteration of loop by a certain time
<p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/KH8Gf/27/">http://jsfiddle.net/KH8Gf/27/</a></p>

<p><strong>Code:</strong></p>

<pre><code>$(document).ready(function()
{
 $('#expand').click(function()
    {
        var qty= $('#qty').val();

        for (var counter = 0; counter &lt; qty; counter++)
        {
            $('#child').html($('#child').html() + '&lt;br/&gt;new text');            
        }
    });
});
</code></pre>

<p>How can I delay each iteration of the loop by a certain time?</p>

<p>I tried the following unsuccessfully:</p>

<pre><code>setTimeout(function(){
$('#child').html($('#child').html() + '&lt;br/&gt;new text'); 
},500);
</code></pre>

<p>and</p>

<pre><code>$('#child').delay(500).html($('#child').html() + '&lt;br/&gt;new text'); 
</code></pre>
