I have a function that builds up a table of dates as the user clicks on different dates in a date picker.
An array is also built up of the dates as they are added to the table
I also have a function to remove the dates from the table and array as they are clicked in the table

This all works except the last part. The dates are removed from the table but not the array and this is what I need help with.
I don't think it is appending 

```
    //function to build up custom dates list
    var customStartDates = [];
    var customEndDates = [];

    $("#btnStartDate").on('click', function () {
        //I think this.value below is undefined..
        $('#customDatesTable').append("<tr id='" + this.value + "'><td>" +
            $("#StartDateCustom").val() + "<input type='hidden' 
               name='CustomStartDates[]' value='"
            + $("#StartDateCustom").val() + "'>" + "<input type='hidden' 
               name='CustomEndDates[]' value='"
            + $("#EndDateCustom").val() + "'>" + "</td>" + "<td>"
            + $("#EndDateCustom").val() + "</td>" + "<td 
            width='10%'>X</td>  </tr>");
        customStartDates.push( $("#StartDateCustom").val());
        customEndDates.push($("#EndDateCustom").val());
    });

    //function to remove custom dates from table
    $("#customDatesTable").on('click', 'td', function () {
        var item = $(this).parent().attr('value');
        $(this).parent().remove();

        customStartDates = $.grep(customStartDates, function (value) {
            return value != item;
        });
        customEndDates = $.grep(customEndDates, function (value) {
            return value != item;
        });
    });

```