How to add dynamic row using jquery

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(),
''
]).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();

});

To address the issue you are facing with the DataTable plugin, you can use an alternative method to bind data in jQuery. One popular alternative is to use the jQuery append() function to add rows dynamically to an HTML table.

Here's an example of how you can achieve this:

$('#btnAdd').on('click', function () {
    var newRow = '' +
        '' + $('#ddlLeaveType option:selected').val() + '' +
        '' + $('#ddlLeaveType option:selected').text() + '' +
        '' + $('#txtFromDate').val() + '' +
        '' + $('#txtToDate').val() + '' +
        '' + $('#txtNoOfDay').val() + '' +
        '' + $('#halfday').val() + '' +
        '' + $('#ddlHalfDayDate option:selected').text() + '' +
        '' + $('#ddlHalfDaySession option:selected').text() + '' +
        '' + $('#txtReason').val() + '' +
        '' +
        '';

    $('#tblAddList tbody').append(newRow);
});

we are creating a new row as a string using the values from the form inputs. Then, we use the append() function to add the new row to the tbody of the table.

To clear the table and remove all rows, you can use the empty() function:

$('#btnClear').on('click', function () {
    $('#tblAddList tbody').empty();
});

This will remove all the rows from the table, allowing you to start fresh when adding new rows.