How to add dynamic row using jquery

Question

Which technique used insted of gridview in jquery databind. I  used datatable , in datatable i want to add row on click of add button, row is added but when we clear datatable and again add row then previously clear data is also added , so  any other method used to bind data 

     suppose added 1 row with data and then clear and again add new row that time 2 row added 

 

My code is

       var t = $('#tblAddList').DataTable();
            $('#btnAdd').on('click', function () {

                           t.row.add([
                            $('#ddlLeaveType option:selected').val(),
                                  $('#ddlLeaveType option:selected').text(),
                                  $('#txtFromDate').val(),
                                  $('#txtToDate').val(),
                                  $("#txtNoOfDay").val(),
                                  $("#halfday").val(),$('#ddlHalfDayDateoption:selected').text(),
                                  $('#ddlHalfDaySession:selected').text(),
                                  $("#txtReason").val(),
                                  '<button type="button" class="btn btn-default btn-Remove">Remove</button>'                   
                        ]).draw();

  });

 

  $('#btnClear').on('click', function () {
    $('#tblAddList').DataTable({
        bRetrieve: true
    });
    $('#tblAddList').dataTable({
        destroy: true,
        bPaginate: false,
        bFilter: false,
        bSort: false,
        footer: false
    });
    $("#tblAddList > tbody").empty();
    $("#tblAddList > tfoot").hide();
    var table = $('#tblAddList').DataTable();
    table
        .clear()
        .draw();

    var rows = table.rows().remove().draw();
 
    $(this).parent('td').parent('tr').remove();
 

 

  });