jQuery Clone Clear Text Field

I am trying to get the friend fields (name + email) to repeat when you click "add another friend". Ever开发者_开发问答y time I try to clone the fields it includes the text inside the fields which I dont want! Has anybody got any ideas?

jsFiddle

Thanks in advance :)

Bind a click event handler to the "add another friend" <div> element. In that event handler, you want to append another row of form elements to the <p> element.

HTML:

<p id="friendlist">Friend 1 Name:
    <input type="text" name="friend_name[]" class="friendid">
    Friend 1 Email:
    <input type="text" name="friend_email[]" class="friendid"/></p>

<div id="addanother">add another friend</div>

<input type="submit" name="submit" />

Your jQuery:

$(function() {
    var nextIndex = 2;

    $("#addanother").click(function() {
        var html = '<br />Friend ' + nextIndex + 'Name:';
        html += '<input type="text" name="friend_name[]" class="friendid" />'
        html += 'Friend ' + nextIndex + 'Email:';
        html += '<input type="text" name="friend_email[]" class="friendid" />';
        $("#friendlist").append($(html));
        nextIndex++;
    });
});

jsFiddle

Try setting the fields value='' after you take the values from them