jquery moving rows dynamically with .on

jquery moving rows dynamically with .on

I'm attempting to move rows between two tables, but I cannot get it to
keep the click event bound to it. I'm confused on the selector part on the
.on event I'm not sure what I'm supposed to be targeting with that.
Basically I can get it to move to one table, and back but then it losses
the click property. Not sure why.
I've attached a fiddle(http://jsfiddle.net/Yjqkn/216/) to make the problem
clearer. The approve button moves it down, and the waitlist button moves
it back, but then it loses all event listeners do I need to rebind them
with .bind What is the best way to solve this.
I tried : .on("click","button.remove-participant",function() didn't work
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();
});
}
});
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>