DataTables lose pageLength on new data

Question

I have 2 tables by selecting row from table 1 data will return in table 2, for first time select everything is OK, but when I select second row table 2 will lose pageLength ability.

Code

myChapters: function(id) {
    this.getChapters = '',
    this.getVerses = '',
    axios.get('/api/getChapters/'+id).then((res) => {
        this.getChapters = res.data.chapters;
        this.isLoadingChapters = false;
        this.verse.book_id = id;
        setTimeout(function() {
            // dataTables
            $("#chapters").DataTable({
                select: true,
                retrieve: true,
                pageLength : 5,
                lengthMenu: [[5, 10, 20, 50, 100, -1], [5, 10, 20, 50, 100, 'All']]
            });
        }, 500);
    })
    .catch((err) => {
        console.log(err)
    });
},

Any idea?

Answer 1

I was talking something like this,

myChapters: function(id) {
    this.getChapters = '',
    this.getVerses = '',
    axios.get('/api/getChapters/'+id).then((res) => {
        this.getChapters = res.data.chapters;
        this.isLoadingChapters = false;
        this.verse.book_id = id;
        if ($.fn.dataTable.isDataTable('#chapters')) {
            $('#chapters').DataTable().clear().destroy(); //This will destroy datatable               
        }
        setTimeout(function() {
            // dataTables
            $("#chapters").DataTable({
                select: true,
                retrieve: true,
                pageLength : 5,
                lengthMenu: [[5, 10, 20, 50, 100, -1], [5, 10, 20, 50, 100, 'All']]
            });
        }, 500);
    })
    .catch((err) => {
        console.log(err)
    });
},