Testcase Change table Row

HTML

<h4>
Beschikbare items
</h4>
<table id="beschikbaar">
  <thead>
    <tr><th>#</th><th>Item naam</th></tr>
  </thead>
  <tbody>
    <tr><td><input type="checkbox" name="items[]" value="1" class="chkBeschikbaar"></td><td>Item 1</td></tr>
    <tr><td><input type="checkbox" name="items[]" value="2" class="chkBeschikbaar"></td><td>Item 2</td></tr>
    <tr><td><input type="checkbox" name="items[]" value="3" class="chkBeschikbaar"></td><td>Item 3</td></tr>
    <tr><td><input type="checkbox" name="items[]" value="4" class="chkBeschikbaar"></td><td>Item 4</td></tr>
    <tr><td><input type="checkbox" name="items[]" value="5" class="chkBeschikbaar"></td><td>Item 5</td></tr>
  </tbody>
</table>
<h4>
Geselecteerde items
</h4>
<table id="geselecteerd">
  <thead>
    <tr><th>#</th><th>Item naam</th></tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

JavaScript

$('.chkBeschikbaar').change(function(){
			if($(this).is(':checked')){
				// item verplaatsen naar geselecteerd
				$(this).closest("tr").clone().appendTo("#geselecteerd tbody");
				$(this).closest("tr").remove();
			} else {
				// item verplaatsen naar beschikbaar
				$(this).closest("tr").clone().appendTo("#beschikbaar tbody");
				$(this).closest("tr").remove();
			}
});