Knoct out template binding - changing datasource at runtime and rebind template

<script type="text/html" id="person-template">
 <tr><td>
       <p>Book Title: <h3 data-bind="text: Title"></h3>       
       <p>Available City: <span data-bind="text: CityName"></span></p>
</td></tr>
</script>


<table id="sample">					
<tbody id="list" data-bind="template: { name: 'person-template', foreach: people }" >
</tbody>                                
</table>


  jQuery(document).ready(function () { 
      
        var loData = AjaxCall('default.aspx', 'GetBookData', '10');
        var Data = JSON.parse(loData.Data);

        function MyViewModel() {
            this.people = Data.Table
        }
        ko.applyBindings(new MyViewModel()); 
       
    });
	
	
	$("#btnChangData").click(
	
        var loData = AjaxCall('default.aspx', 'GetBookData', '20');
        var Data = JSON.parse(loData.Data);           
        
        ko.cleanNode($("#list")[0]);
        $('#sample').empty();
        $('#sample').html('<tbody id="list" data-bind="template: { name: "person-template", foreach: people }" ></tbody>');
        function MyViewModel() {
            this.people = Data.Table
        }
        ko.applyBindings(new MyViewModel());
		
		);

You cannot apply bindings multiple times to the same element