JQuery click event only working on first 10 rows of a table

SimonPrice3376

I am trying to open a modal to be used as an edit screen based on the click of a table row. However, this is only working on the first 10 rows of the table.

the code im using to get the row data is

$(document).ready(function () {
$("tr").click(function () {
//alert($(this.id).selector);
$("#updateCase").modal();
});

});

the table is being build up like this but with 538 rows

table id='tblProcessing' class='table table-striped table-hover table-border'>
<thead>
<tr>
<th class='centre RequestId' hidden>RequestId</th>
<th class='centre CMCReference'>CMC Reference</th>
<th class='centre FirstCustomerName'>First Customer Name</th>
<th class='centre FirstCustomerDOB'>First Customer DOB</th>
<th class='centre SecondCustomerName'>Second Customer Name</th>
<th class='centre SecondCustomerDOB'>Second Customer DOB</th>
<th class='centre CustomerPostcode'>Customer Postcode</th>
<th class='centre BusinessArea'>Business Area</th>
<th class='centre AccountType'>Account Type</th>
<th class='centre AccountOrCardNumber'>Account Or Card Number</th>
<th class='centre LOAOutcome'>LOA Outcome</th>
<th class='centre Outcome'>Outcome</th>
<th class='centre Response'>Response</th>
<th class='centre Complete'>Complete</th>
<th class='centre Edit'>Edit</th>
</tr>
</thead>

<tfoot class='foot'>
<tr>
<th>RequestId</th>
<th>CMC Reference</th>
<th>First Customer Name</th>
<th>First Customer DOB</th>
<th>Second Customer Name</th>
<th>Second Customer DOB</th>
<th>Customer Postcode</th>
<th>Business Area</th>
<th>Account Type</th>
<th>Account Or Card Number</th>
<th>LOA Outcome</th>
<th>Outcome</th>
<th>Response</th>
<th>Complete</th>
<th>Edit</th>
</tr>
</tfoot>
<tbody>
<tr id='2211'>
<td class='centre RequestId' hidden>xxxx</td>
<td class='centre CMCReference'>xxxxx</td>
<td class='centre FirstCustomerName'>Susan Seymour</td>
<td class='centre FirstCustomerDOB'>08/10/1981 </td>
<td class='centre SecondCustomerName'></td>
<td class='centre SecondCustomerDOB'></td>
<td class='centre CustomerPostcode'>PE4 XXX</td>
<td class='centre BusinessArea'></td>
<td class='centre AccountType'>Mortgage</td>
<td class='centre AccountOrCardNumber'>xxxxxxxx</td>
<td class='centre LOAOutcome'>Not Seen</td>
<td class='centre Outcome'></td>
<td class='centre Response'></td>
<td class='centre Complete'>True</td>
<td class='centre Edit'><span class='btn><i id='xxxx' class='fa fa-pencil-square-o fa-2x edit' aria-hidden='true'></i></span></td>
</tr>
</tbody>
</table>

and I am calling it using $('#'tblProcessing' ').DataTable();

Is this a known issue or is there something im not doing right?

thanks

Simon