I'm writing something that allows addition and removal of new rows, the original row can be removed, but the cloned ones can't. Here's my JS:

```
(function( $ ) {

  $.fn.addVarRow = function() {

    // Bind it to a click event
    $(this).click(function(e) {

        e.preventDefault();

        // Set some variables
        var $this = $(this);
        var $target = $('#newVarTable tbody tr:last');
        var $newRow = $target.clone();

        $target.after($newRow);

    })
  }

  $.fn.removeVarRow = function() {

    // Bind it to a click event
    $(this).click(function(e) {

        e.preventDefault();

        // remove row
        $(this).closest('tr').remove();

        return false;

    });
  };

})( jQuery );

jQuery(document).ready(function ($) {

    // Bind the click for adding a row
    $('#addVarRow').addVarRow();
    $('.removeVarRow').removeVarRow();

});

```

Here's my row:

```
        <!-- !Repeat me: Start -->
        <tr>
            <td>
                <input type="text" id="varSKU[]" name="varSKU[]" value="" style="width: 99%" placeholder="ie Product number, AB01234">
            </td>
            <td>
                <input type="text" id="varD1[]" name="varD1[]" value="" style="width: 99%" placeholder="ie 'Red'">
            </td>
            <td>
                <input type="text" id="varD2[]" name="varD2[]" value="" style="width: 99%" placeholder="ie 'Large'">
            </td>
            <td><a href="#removeRow" class="removeVarRow">Remove</a></td>
        </tr>
        <!-- Repeat me: End -->

```

I can't see why, any advice welcomed! Thanks in advance