Add a new line in array
<p>I have the following code:</p>

<pre><code>$('.getcode').click(function () {
        $('textarea').val("");
        var str = [];
        $('#group-wrap span').each(function () {
            str.push($(this).attr('title') + $(this).text());
        });
        $('textarea').val(str.join(''));
    });
</code></pre>

<p>Which grabs the content of each span and the value of each title attribute for the span and appends it to a textarea field.</p>

<pre><code>&lt;span class="grouptitle" title="&amp;f"&gt;Group&lt;/span&gt; (Multiple spans like this)
</code></pre>

<p>The output is this:</p>

<pre><code>&amp;f(&amp;fGroup&amp;f) &amp;fUsername&amp;f:&amp;f Hello There!
</code></pre>

<p>I have a button, when click, appends a new set cloned span elements</p>

<pre><code>var = groupClone = $('.wrapper'); //wrapper for the span's
    $('.add').click(function(){
            groupClone.first().clone().appendTo('#group-wrap');
        });
</code></pre>

<p>It kinda works, except the output is now this if I add another one:</p>

<pre><code>&amp;f(&amp;fGroup&amp;f) &amp;fUsername&amp;f:&amp;f Hello There!&amp;f(&amp;fGroup&amp;f) &amp;fUsername&amp;f:&amp;f Hello There!
</code></pre>

<p>How can I add a new line (\n I'm assuming?) so the output is this in the the textarea? </p>

<pre><code>&amp;f(&amp;fGroup&amp;f) &amp;fUsername&amp;f:&amp;f Hello There!
   &amp;f(&amp;fGroup&amp;f) &amp;fUsername&amp;f:&amp;f Hello There!
</code></pre>
