Demo JQuery .append(), .prepend(), .before() dan .after()

HTML

<div>
I use display:none and .show() to do this. <br>
But I want to use .append() <br>When change first element, second element appended and when change second element third element appended ...
</div>
<table>
<tr>
<td><select id='sel1'><option value='1'>value1</option><option value='2'>value2</option><option value='3'>value3</option><option value='4'>value4</option><option value='5'>value5</option></select></td>
</tr>
<tr>
<td><select id='sel2' style='display:none'><option value='1'>value1</option><option value='2'>value2</option><option value='3'>value3</option><option value='4'>value4</option><option value='5'>value5</option></select></td>
</tr>
<tr>
<td><select id='sel3' style='display:none'><option value='1'>value1</option><option value='2'>value2</option><option value='3'>value3</option><option value='4'>value4</option><option value='5'>value5</option></select></td>
</tr>
<tr>
<td><select id='sel4' style='display:none'><option value='1'>value1</option><option value='2'>value2</option><option value='3'>value3</option><option value='4'>value4</option><option value='5'>value5</option></select></td>
</tr>
<tr>
<td><select id='sel5' style='display:none'><option value='1'>value1</option><option value='2'>value2</option><option value='3'>value3</option><option value='4'>value4</option><option value='5'>value5</option></select></td>
</tr>
</table>

CSS

body {
  padding:50px;   
}

div {
  border:2px solid #bbb;
  background-color:#eee;
  padding:10px;
  margin:10px auto;
}

span {
  display:block;
  width:65px;
  font:bold 12px Arial,Sans-Serif;
  color:white;
  padding:5px 10px;
  background-color:black;    
}

JavaScript

$('#sel1').change(function() {
		$('#sel2').show();
	});
  	$('#sel2').change(function() {
		$('#sel3').show();
	});
  	$('#sel3').change(function() {
		$('#sel4').show();
	});
  	$('#sel4').change(function() {
		$('#sel5').show();
	});