jQuery Cloning Elements then populating hidden field with concatenated results to avoid empty list issue
<p>I got some code from a friend's blog to copy form elements using jQuery, and that works great:</p>

<pre><code>$('#btnAdd').click(function() {
    var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('#input' + num).after(newElem);

    // enable the "remove" button
    $('#btnDel').attr('disabled','');

    // business rule: you can only add 5 names
    if (newNum == 5)
        $('#btnAdd').attr('disabled','disabled');
});

$('#btnDel').click(function() {
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    $('#input' + num).remove();     // remove the last element

    // enable the "add" button
    $('#btnAdd').attr('disabled','');

    // if only one element remains, disable the "remove" button
    if (num-1 == 1)
        $('#btnDel').attr('disabled','disabled');
});
</code></pre>

<p>This works on an address block with the fields "address1,address2,city,state,zip". That way, when the form is submitted, I just loop over the list to insert the values into a table. But because there won't always be an entry in address2, the list I get doesn't give me a way to tell which list element it actually belongs to.</p>

<p>So, another friend suggested that, on form submit, I take the values from the form fields, change the delimiter to | (a good idea) and stuff them into hidden fields (which I called hidden_address1, hidden_address2, hidden_city, etc). And he gave me this code, which isn't working:</p>

<pre><code>var values = [];
$('.address1').each(function() {
    values.push($(this).val());
});

$('#hidden_field').val(values.join('|'));
</code></pre>

<p>So I replicated that over the five fields, added values.length = 0; in between each set, but it's not working and Firebug isn't reporting any errors.</p>

<p>This is an area of jQuery where I'm just not that good.  What am I doing wrong? :)</p>
