jQuery DataTables 1.10.11 with scrolling enabled duplicates footer leading to duplicate IDs

HTML

<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/dataTables.bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <p><br/></p>
	<div class="container">
	<h1>Data Table</h1>
 		 <table class="table table-striped  table-bordered  table-hover" id="mydata"> 
	<thead>
	    <tr>
                	<th>First name</th>
                	<th>Last name</th>
	               <th>Position</th>
              	 <th>Office</th>
	               <th>Age</th>
              	 <th>Start date</th>
	               <th>Salary</th>
              	 <th>Extn.</th>
	               <th>E-mail</th>
            	      </tr>
	</thead>
			<tfoot>
 <tr>
                	<th>First name</th>
                	<th>Last name</th>
	               <th>Position</th>
              	 <th>Office</th>
	               <th>Age</th>
              	 <th>Start date</th>
	               <th>Salary</th>
              	 <th>Extn.</th>
	               <th>E-mail</th>
            	      </tr>
			</tfoot>
<tbody>
<tr>
                <td>Tiger</td>
               ...

JavaScript

$('#mydata').dataTable({
	scrollY : 'auto'
});
alert('Number of inputs with ID "lastname": ' + $('input[id="lastname"]').length);