Html Table "add Row" Or "remove Row" Button Column

I need a way to add or remove a row below another row in my html table. I'm using the dom, and can add and remove rows easily enough, but the problem comes up when I try to have a

Solution 1:

Like this? I do not know where you are going to take values 'Mango' and 'Pear'.. http://jsfiddle.net/vPatQ/

$('.AddNew').click(function(){
   var row = $(this).closest('tr').clone();
   row.find('input').val('');
   $(this).closest('tr').after(row);
   $('input[type="button"]', row).removeClass('AddNew')
                                 .addClass('RemoveRow').val('Remove item');
});

$('table').on('click', '.RemoveRow', function(){
  $(this).closest('tr').remove();
});

for html code

<table><tr><td>Item Type</td><td>Item</td><td>Add/Remove Item</td></tr><tr><td><inputtype='text'value='Fruit >'></td><td><inputtype='text'value='Apple'></td><td><inputtype='button'class='AddNew'value='Add new item'></td></tr></table>