Dynamically adding Rows using Jquery

HTML

<table>
    <tr>
        <td><input type="text" value="0" id= "unit"></input></td>
        <td><input type="text" value="0" id="rate"></input></td>
        <td><input type="button" value="Add" class="btnAdd"></input></td>
    </tr>
</table>

JavaScript

$('table').on('click', '.btnAdd', function(){    
    var itemIndex = $(this).closest('tr').index();    
    alert(itemIndex);
    var tr = "<tr><td><input type=text value=0 id= unit_" + itemIndex + "></input</td><td><input type=text value=0 id=rate></input></td><td><input type=button value=Add class=btnAdd></input></td></tr>";
    $(this).closest('table').append(tr);
    $(this).attr('value', 'Delete');
    $(this).toggleClass('btnDelete').toggleClass('btnAdd');
}).on('click', '.btnDelete', function(){
    alert($(this).closest('tr').index());
    $(this).closest('tr').remove();
});;