I'm using a grid widget to display a bunch of data. Because of the way the grid works, I need to run an ajax query on each of the rows in the table after it has loaded. (I tried to figure out a better way, there isn't one.) I'm running the queries at the correct time, that's not an issue, but my page is returning strange results.
I have to go through each row of the table for other functions as well, so I'm running the ajax calls inside the for loop that everything else (synchronous) runs inside. The ajax calls are both sending and receiving back the correct data, but it's not being applied to the grid. I have three possible return values: read applies the read-row class, alert applies the alert-row class, and none is a dummy return that does nothing other than indicate success. If anything in the row returns read, however, that class is being applied to the last row of the grid instead of the one that was originally referenced in the request.
What am I doing wrong? How would I rewrite this to correctly apply the given class based on the ajax response? The declarations of the row information, data, and the ajax call itself are all correct. The correct information is being sent in the call, and the correct information is being received back.
Here's my current code. I tried putting the success function in as a done block appended to the ajax call, but that causes the same problem.
// this is the correct initialization
var gridData = grid.dataSource.view();
for (var i = 0; i < gridData.length; i++) {
    // these are also correct. I can step through with the debugger and 
    // currentRow is properly set
    var currentUid = gridData[i].uid;
    var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
    // the grid caches its row information when refreshed, so this is
    // necessary to "reset" the row
    $(currentRow).removeClass("read-row");
    $(currentRow).removeClass("alert-row");
    // other synchronous stuff, only manipulates individual cell data
    $.ajax({
        cache: false,
        type: "GET",
        url: "/correct/url",
        data: { "pId": gridData[i].Id },
        dataType: "text",
        success: (function(res) {
            if (res === "read") {
                $(currentRow).addClass("read-row");
            } else if (res === "alert") {
                $(currentRow).addClass("alert-row");
            }
        }),
        error: (function() {
            alert("errormsg");
        })
    });
    // more synchronous stuff, only manipulates individual cell data
}
