jQuery button binding issue

Question

I have an HTML table with 2 rows and 6 columns. The last column has a Bootstrap button that when clicked, clones the last row and adds it to the table. After a new last row is added to the table, I remove the button in the penultimate row. My table is decorated with a class attribute called: advPayment.

Here is my HTML:

<table class="advPayment">
    <thead>
        <tr>
            <th>Type</th>
            <th>Ref No.</th>
            <th>Amount</th>
            <th>Deposit Date</th>
            <th>Comment</th>
            <th>&nbsp;</th>
        </tr>                        
    </thead>
    <tbody>
        <tr>
            <td>Cash</td>
            <td>12410008</td>
            <td>$175.00</td>
            <td>05-12-2015</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Check</td>
            <td>5561</td>
            <td>$325.00</td>
            <td>05-12-2015</td>
            <td>&nbsp;</td>
            <td><a href="#" class="btn btn-success btn-xs add">Add</a></td>
        </tr>                        
    </tbody>
</table> 

Here is my javascript:

$(".advPayment tbody tr:last td:last a").click(function(e) {
    e.preventDefault();

    $(".advPayment tbody tr").last().clone().appendTo(".advPayment");
    var rowCount = $('table.advPayment tbody tr').length - 1;

    // remove Add button from the second to the last row
    $(".advPayment tbody tr:nth-child(" + rowCount + ") td:last a").remove();

}); 

The first time I click on the Add button, the code works. The next time I click on the button, it doesn't work.

I have a feeling it's due to the way the jQuery button binding works, but I wanted to get a second opinion. Is there another way to dynamically bind on the fly?