SELECT get multiple values from ajax request

kurumi

I'm working on Laravel project with Datatable BS4 and Select.
I created a simple request using jQuery and Ajax.
After that I selected a row and get column values.

BUT when I press the button many times, the selected values from table keeps adding to array as much as button pressed.

Here are codes

$("#btn_submit").click(function(){
        table.clear().draw();
                var from = $('#from').val(),
                    to = $('#to').val(),
                    name = $('#name').val(),
                    dept = '<?php echo $dept; ?>';
                $.ajax({
                    url: "{{ route('find.post') }}",
                    type: "POST",
                    beforeSend: function() {
                        $('#loading').show();
                    },
                    complete: function() {
                        $('#loading').hide();
                    },
                    data: {
                        from : from,
                        to : to,
                        name : name,
                        dept : dept
                    },
                    success: function(res) {
                        // console.log(res.data);
                        if (res.status === 'success') {
                            var table = $("#tb_data").DataTable({
                                dom: 'Bfrtip',
                                data: res.data,
                                columns: [
                                    {
                                        data: "null",
                                        defaultContent: "",
                                    },
                                    {data: "doc_date"},
                                    {data: "doc_num"},
                                    {data: "detail"},
                                    {data: "sender"},
                                    {data: "src_dept"},
                                    {data: "recipient"},
                                    {data: "dest_dept"},
                                    {data: "receiver"},
                                    {data: "sent_datetime"},
                                    {data: "hr_received_datetime"},
                                    {data: "hr_sent_datetime"},
                                    {data: "received_datetime"},
                                    // {data: null}
                                ],
                                columnDefs: [ {
                                    orderable: false,
                                    className: 'select-checkbox',
                                    targets:   0
                                } ],
                                select: {
                                    style:    'os',
                                    selector: 'td:first-child'
                                },
                                select: true,
                                buttons: [
                                    {
                                        text: 'ดำเนินการต่อ',
                                        action: function () {
                                            var ref_doc_num = table.rows( { selected: true } ).data().pluck('doc_num').toArray(),
                                                detail = table.rows( { selected: true } ).data().pluck('detail').toArray();
                                                table.clear().draw();
                                        }
                                    }
                                ],
                                responsive: false,
                                orderCellsTop: true,
                                order: [[ 1, 'asc' ]],
                                scrollX: true,
                                stateSave: false,
                                bDestroy: true
                            });
                        }
                    }
                });

I tried to use table.clear().draw() but that's not working.
Is it because of rows.data().pluck().toArray ?
Is there a way to retrieve only single selected row value?
What did I miss?

allan

Thanks for your question. As noted in the forum rules, please post a link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

It isn't immediately clear to me from your code above why what you describe is happening, so I would need a test case to be able to help.

Allan