Adding/Removing Input Boxes with jQuery - Added Input Boxes Duplicating Values of First Input Boxes

Question

I have a semi-working JSFiddle here: http://jsfiddle.net/BHdhw/311/ that I put together with the help of this website, with this code:

HTML

<div class='Option'><input type='text' name='txtTest1'/><input type='text' name='txtTest2'/><input type='text' name='txtTest3'/> <span class='Delete'><input id="Delete" class="button_text" type="submit" name="submit" value="Delete" /></span></div>

<br/><br/>
<span class='Add'><input id="Add" class="button_text" type="submit" name="submit" value="Add" /></span>

jQuery

$(function(){

    $('.Delete').live('click',function(e){
    $(this).parent().remove();
    });
    $('.Add').live('click',function(e){
        $('.Option:last').after($('.Option:first').clone());
    });

});

If I have text in the first input boxes, and I add another row of input boxes by use of the Add button, a new row of input boxes is added, but the contents of those new boxes mimics the contents of the first set of boxes. Is there a way to generate a set of blank input boxes, even though the first set of boxes has values in them? I've searched the jQuery API for clone() and a few other methods, but I haven't been able to turn up anything that works for me.

Should there be a way to even clear the values of the last set of input boxes after they're created? Or a way to just generate a blank set of boxes with no values?

Answer 1

$(function(){
    $('.Delete').live('click',function(e){
    $(this).parent().remove();
    });
    $('.Add').live('click',function(e){
        $('.Option:last').after($('.Option:first').clone()
                               .find("input:text").val("").end());
    });
});