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><input type='text' value='Fruit >'></td>
        <td><input type='text' value='Apple'></td>
        <td><input type='button' class='AddNew' value='Add new item'></td></tr>
</table>