ajax result not showing properly in table - php

Question

I need to refresh contents in table every 5 seconds. I did this with ajax and setInterval functions. But the result is not properly displayed.
This is the result displaying. Here the first row is replaced by last row. I couldn't find the reason.
Here is my code.
My controller
public function latestReport() {
$data['incomingCount'] = $this->Home_model->findCount('incoming');
$data['outgoingCount'] = $this->Home_model->findCount('outgoing');
$data['droppedCount'] = $this->Home_model->findCount('drop');
$data['latestReport'] = $this->Home_model->latestReport(10);
print_r(json_encode($data));
}
Script
function latestReport() {
$.ajax({
url : base_url + 'Home/latestReport',
type : 'POST',
success:function(data) {
var res = $.parseJSON(data);
$('#incomingCount').text(res.incomingCount);
$('#outgoingCount').text(res.outgoingCount);
$('#droppedCount').text(res.droppedCount);
var latestCount = res.latestReport.length;
for(var i = 0; i < latestCount; i++){
var count = parseInt(i) + 1;
$('#resNo').text(count);
$('#resSource').text(res.latestReport[i]['Source']);
$('#resDest').text(res.latestReport[i]['Destination']);
$('#resCallerID').text(res.latestReport[i]['CallerID']);
$('#CallerTime').text(res.latestReport[i]['CallStartTime']);
$('#resStatus').text(res.latestReport[i]['Status']);
$('#resAgent').text(res.latestReport[i]['Agent']);
$('#resType').text(res.latestReport[i]['Type']);
}
}
});
}
var myVar = setInterval(latestReport, 5000);
HTML
<table class="normal-table" id="senderidList">
<tr>
<th style="width: 100px">Sl No</th>
<th style="width: 100px">Source</th>
<th>Destination</th>
<th>CallerID</th>
<th style="width: 150px">Call Start Time</th>
<th>Status</th>
<th>Agent</th>
<th>Type</th>
</tr>
<?php if( isset($latestReport) && !empty($latestReport)) {
$i = 1;
foreach($latestReport as $report) {
?>
<tr>
<td id="resNo"><?php echo $i++;?></td>
<td id="resSource"><?php echo $report['Source']?></td>
<td id="resDest"><?php echo $report['Destination']; ?></td>
<td id="resCallerID"><?php echo $report['CallerID']?></td>
<td id="CallerTime"><?php echo date('d-m-Y h:i:s A', strtotime($report['CallStartTime'])); ?></td>
<td id="resStatus"><?php echo $report['Status']?> </td>
<td id="resAgent"><?php echo $report['Agent']?> </td>
<td id="resType"><?php echo $report['Type']?> </td>
</tr>
<?php } }
else {?>
<tr><td colspan="4"> No details available</td></tr>
<?php } ?>
</table>
I am getting the result from controller properly. But something happened when showing in table.

Answer 1

This is because the cells in each row all have the same ID, so you are updating the first row 10 times.
HTML elements should not have duplicate IDs.
You can do this instead, in PHP:
<tr id="row-<?php echo $i; ?>">
<td class="resNo"><?php echo $i++;?></td>
...
Then in JavaScript:
$('#row-' + count + ' .resNo').text(count);
...
Also, there is no need for parseInt(i) - just use i.

Answer 2

You can display your data without giving ID's to 'td' tags in HTML
make your html as follow
<table class="normal-table" id="senderidList">
<thead>
<tr>
<th style="width: 100px">Sl No</th>
<th style="width: 100px">Source</th>
<th>Destination</th>
<th>CallerID</th>
<th style="width: 150px">Call Start Time</th>
<th>Status</th>
<th>Agent</th>
<th>Type</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Write following code in Success of Your ajax function for appending row 1 by 1
$('#senderidList tbody').empty();//clear your data
var TableBody = '';
if (data.d.length > 0) {
//following $.each loop will Concate data one by one
$.each(data.d, function (i, latestReport) {
TableBody += '<tr><td>' + i + 1 + '<td><td>' + latestReport['Source'] + '<td><td>' + latestReport['Destination'] + '<td><td>' + latestReport['CallerID'] + '<td><td>' + latestReport['CallStartTime'] + '<td><td>' + latestReport['Status'] + '<td><td>' + latestReport['Agent'] + '<td><td>' + latestReport['Type'] + '<td></tr>';
});
}
else
{
TableBody = '<tr><td colspan="4"> No details available</td></tr>';
}
//append the created html to the table body using append function
$('#senderidList tbody').append(TableBody);
if You want to give Id to every 'td' then you can give in $.each
<td id="yourID'+i+'"> for every td in body tag