JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css"> 
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
  
</head>
<body>
<table id="table_id">   
        <thead>        
            <tr>            
                <th>Name</th>         
                <th>Age</th>               
                <th>Bot</th> 
            </tr>   
        </thead> 
        <tbody>  
            <tr>       
                <td>John</td>
                <td>25</td>   
                <td><button type="button" id="myBtn_1">Select</button></td> 
                
            </tr>
            <tr>
                <td>Ana</td>
                <td>22</td>     
                <td><button type="button" id="myBtn_2">Select</button></td>
           </tr>
           <tr>
                <td>Diana</td>
                <td>23</td>    
                <td><button type="button" id="myBtn_3">Select</button></td> 
           </tr>
           <tr>
                <td>Lino</td>
                <td>32</td>    
                <td><button type="button" id="myBtn_4">Select</button></td> 
           </tr>
        </tbody>
    </table>
    

    
    <button id="supLigne" type="button" class="delete">Supprimer une ligne</button>
    <button type="button" class="valide" id="valider">Validation</button>
    <div id="result" class="result"> </div>

</body>
</html>

JavaScript

$(document).ready(function() {

//your code for construct the table 
var table = 
    $('#table_id').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );

 
$('#table_id tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );

$('#supLigne').click( function () {
        table.row('.selected').remove().draw( false );
    } );

 
 $('#addIndfo').on( 'click', function () {
     table.row.add( [
        $("#nom").val(),
        $("#age").val(),

     ] ).draw( false );

 } );


$('#table_id').on( 'click', 'button', function () { //change this to be equal to the id of your table
var index = table.row( this ).index();
console.log(index);
var data_row = table.row( $(this).parents('tr') ).data();
console.log('Name: ' + data_row[0] + "\n" + 'Age: ' + data_row[1]);
$.ajax( { 
        type : 'POST',
        data : {'data0': data_row[0], 'data1': data_row[1] },
        url  : 'server_processing.php',            
        success: function ( data ) {
            console.log( data );              
        },
        error: function ( xhr ) {
            console.log( "error" );
        }
      });
} );
$("#valider").click( function()
           {
            var table = $('#table_id').DataTable();
            var plainArray = table
                                   .rows()

                                   .data()
                                   .toArray();
            console.log(plainArray );
           // $('#result').replaceWith('<p>'+plainArray +'</p>');

            $.ajax( { 
        type : 'POST',
        data : {'data0': plainArray},
        url  : 'https://192.168.50.24/demo/pinterest-clone/public/datas2',            
       ...