JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table_1">
 <tr>
	<th>Info Header 1</th><th>Info Header 2</th>
</tr>
    <tbody>
        <tr><td>Don</td>
    <td><button class="remove-participant" name="">Remove</button></td>
        </tr>
    </tbody>
</table>
<table class="table_2">
 <tr>
	<th>Info Header 1</th><th>Info Header 2</th>
</tr>
    <tbody>
        <tr></tr>
    </tbody>
</table>

CSS

table.table_1,table.table_2  {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}



table.table_1 th,table.table_2 th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table.table_1 td, table.table_2 td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}

JavaScript

$( ":button" ).on("click",function(){

    if($(this).hasClass('remove-participant')) {
          $(this).removeClass('remove-participant').addClass('add-participant');
         $(this).html('Approve');
       var current_row = $(this).closest('tr').html();
      
     
       $('.table_2 > tbody:last').append('<tr>'+current_row+'</tr>');
       $(this).closest('tr').remove();
        
        
        $( ".table_2 .add-participant" ).bind( "click", function() {
             $(this).removeClass('add-participant').addClass('remove-participant');
          var current_row = $(this).closest('tr').html();
                  $(this).html('Waitlist');
                 
                       $('.table_1 > tbody:last').append('<tr>'+current_row+'</tr>');
             $(this).closest('tr').remove();
});
        
        
    }
	
        });