Appending to each element with a specific class

Question

I have a jQuery script shown bellow. It is suppose to get AWS ML prediction and compare the score and depending upon the score append to a cell in a table the correct prediction. All these cells have the same class prediction . When the button is clicked and this script is triggered, it does everything correctly but when it gets to the appending part it throwing an error saying Cannot read property 'append' of undefined .

When i run the same script inside chrome console it appends correctly to the correct places. I am not really sure why this is happening.

    $(document).ready(function(){
        var highPred="";
        $("#predict").click(function(){
        var predictionTables = $(".prediction");
            for (var i = 0; i < 4; i++) {
                var predictedScoresAWS=[];
                var params = {
                  Record: myData[i]
                };
                machinelearning.predict(params, function(err, data) {
                  if (err){
                    console.log(err, err.stack); // an error occurred
                  } else{
                    console.log(data);           // successful response
                    // data = $.parseJSON(data);
                    predictedScoresAWS.push(data.Prediction.predictedScores['Reduce purge history day count']);
                    predictedScoresAWS.push(data.Prediction.predictedScores['Increase the java heap space']);
                    predictedScoresAWS.push(data.Prediction.predictedScores['Successful run']);
                    predictedScoresAWS.push(data.Prediction.predictedScores['Other error']);
                    console.log(predictedScoresAWS)
                    var highPredIndex = predictedScoresAWS.indexOf(Math.max(...predictedScoresAWS))
                    switch(highPredIndex){
                        case 0:
                            highPred='Reduce purge history day count';
                            break;
                        case 1:
                            highPred='Increase the java heap space';
                            break;
                        case 2:
                            highPred='Successful run';
                            break;
                        case 3:
                            highPred='Other error';
                    }
                    console.log(highPred);
                    console.log(predictionTables);
                    console.log(predictionTables[i])
                    while (predictedScoresAWS.length) { predictedScoresAWS.pop(); }
                    predictionTables[i.].append(highPred);
                    }
                });
            }
        });
    });

Answer 1

When you use a subscript with a jQuery collection it returns the DOM object, not a jQuery object. You should use .eq() to get the jQuery object, and then you can call the jQuery append() method.

predictionTables[i].append(highPred);

should be:

predictionTables.eq(i).append(highPred);

Another problem is that you're trying to use the iteration variable i in an asynchronous callback. See JavaScript closure inside loops – simple practical example and Javascript infamous Loop issue? for the problem with this and many solutions. If you can use ES6, just change var i = 0 to let i = 0 .