Update specific table cells after jquery ajax

Question

I'm working on a soccer livescore table that has cell values dynamically updating using jquery and ajax.

This is my ajax call:

function update_table() {
$.ajax({
    type: 'GET',
    url: 'update.php',
    dataType: 'json',
    cache: false,
    success: function (data) {
        $.each(data, function (i, item) {
            var statNo = '#stat' + i;
            var scoreNo = '#score' + i;
            var statData = data[i].status;
            var scoreData = data[i].score;
            $('statNo').html(statData);
            $('scoreNo').html(scoreData);
        });
    }
});

And this is my table:

<table class='table table-hover' id='mainCoupon'>
<tr class='odd' id='0'>
    <td class='kickOff'>12:15</td>
    <td class='CountryFlag'>
        <img border='0' src=media/img/Flags/1.png>
    </td>
    <td class='LeagueName'>Championship</td>
    <td class='status'>
        <div id='stat0'>FT</div>
    </td>
    <td class='home'>Derby</td>
    <td class='score'>
        <div id='score0'>1 - 2</div>
    </td>
    <td class='away'>Nottingham Forest</td>
    <td class='inf'><span class='glyphicon glyphicon-stats'></span>

    </td>
    <td class='add'><span class='glyphicon glyphicon-plus'></span>

    </td>
</tr>
<tr class='even'>
    <td class='matchDetailsTr' colspan='9'>
        <div class='matchDetails'>
            <p>Match Details Here</p>
        </div>
    </td>
</tr>
.....

This is what my json looks like:

[{"status":"FT","score":"1 - 2"},{"status":"FT","score":"0 - 2"},{"status":"FT","score":"4 - 1"},....]

I am running the update function every 10sec in order to update the 'status' and 'score' cells but no joy..

If i console.log the ajax variables they seem fine.

What am I doing wrong; Thanks!

Answer 1

I think these lines should be

$(statNo).html(statData);
$(scoreNo).html(scoreData);

Answer 2

Ok the solution for anyone with the same problem is to first refer to the table id and then search for the specific td id's:

$('#mainCoupon').find('#stat' + i).html(statData);
$('#mainCoupon').find('#score' + i).html(scoreData);