Question

I have the following code:

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

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

<span class="grouptitle" title="&f">Group</span> (Multiple spans like this)

The output is this:

&f(&fGroup&f) &fUsername&f:&f Hello There!

I have a button, when click, appends a new set cloned span elements

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

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

&f(&fGroup&f) &fUsername&f:&f Hello There!&f(&fGroup&f) &fUsername&f:&f Hello There!

How can I add a new line (\n I’m assuming?) so the output is this in the the textarea?

&f(&fGroup&f) &fUsername&f:&f Hello There!
   &f(&fGroup&f) &fUsername&f:&f Hello There!

Answer 1

Very simple, but this should work.

$('.add').click(function(){
    $('#group-wrap').html($('#group-wrap').html() + "\n"); // add a newline to the group-wrap element
    groupClone.first().clone().appendTo('#group-wrap'); // append the copied data in
});