สอบถาม ๆ เรื่อง ใส่ลำดับเลขใน span โดยใช้ jQuery ทำไม่เป็น.....

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$(function(){
    $('#btnPluz').click(function(){
        var num=parseInt($('#number').val())+1;
        var tr=$("<tr id='tr"+num+"'><td><div class='form-item'><button id='btnDel' rel='"+num+"'>ข้อมูล</button><span></span> <label>. ชื่อ - นามสกุล : <input name=n1 id=n1 type=text class=submit  size=30 />         </label></td>");
        var i=1;
        $('#tbody').append(tr);
        $('span').each(function(index, element) {
            i++
            $(this).text(i);
        });	
        $('#number').val(num);
    });

    $('#tbody').on('click','#btnDel',function(){
		if(confirm('คุณต้องการลบแถวนี้?')) 
        var rel=$(this).attr('rel');
        var i=1;
        $("#tr"+rel+"").remove();
        $('span').each(function(index, element) {
            i++
            $(this).text(i);
        });
    });
});
</script>
<table>
    <theader>
        <tr>
            <td>ลบลำดับ
            <button type="button" id="btnPluz">เพิ่มผู้เข้าร่วมประชุม</button></td>
        </tr>
    </theader> 
    <tbody id="tbody">
        
    </tbody>
</table>