How do I parseInt in a For/In Loop then add a class to change font color in CSS?

I'm trying to create a stat table for the hockey team I work with. We have certain metrics we want to hit for certain categories, such as we want to take >30 shots but only allow < 25 shots against; we want to take less than 3 penalties but draw more than 3, etc. Here is the table with just 2 games as input:

<body>
<header>2019-20 Team Stats</header>
<main>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>Game</th>
            <th>Score</th>
            <th id="goal-f">GF</th>
            <th id="goal-a">GA</th>
            <th id="shot-f">Shots For</th>
            <th id="shot-a">Shots Against</th>
            <th>Shot %</th>
            <th id="pen-t">Pen Taken</th>
            <th id="pen-d">Pen Drawn</th>
            <th>PP %</th>
            <th>PK %</th>
            <th id="fo-p">Face-offs</th>
            <th>Hits</th>
            <th id="blk">BS</th>
            <th id="take-a">TA</th>
            <th id="odd-man">OMA</th>
            <th id="eozp">Extended OZP</th>
            <th id="chance-f">CF</th>
            <th id="chance-a">CA</th>
            <th>Chance +/-</th>
            <th id="turn-o">TO</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>10/11/19 at Boston College</td>
            <td>3-5</td> <!--Score-->
            <td>3</td><!--GF-->
            <td>5</td><!--GA-->
            <td>26</td><!--Shots For-->
            <td>28</td><!--Shots Against-->
            <td>.000</td><!--Shot %-->
            <td class="to-num">5</td><!--Pen Taken-->
            <td>4</td><!--Pen Drawn-->
            <td>33%</td><!--FO%-->
            <td>40%</td><!--PP%-->
            <td>100%</td><!--PK%-->
            <td>9</td><!--Hits-->
            <td>11</td><!--BS-->
            <td>7</td><!--TA-->
            <td>10</td><!--OMA-->
            <td>0</td><!--OZP-->
            <td>13</td><!--CF-->
            <td>17</td><!--CA-->
            <td>-4</td><!--C +/1-->
            <td>12</td><!--TO-->
        </tr>
        <tr>
            <td>10/12/19 at Merrimack</td>
            <td>11-6</td> <!--Score-->
            <td>11</td><!--GF-->
            <td>6</td><!--GA-->
            <td>26</td><!--Shots For-->
            <td>22</td><!--Shots Against-->
            <td>.000</td><!--Shot %-->
            <td>3</td><!--Pen Taken-->
            <td>6</td><!--Pen Drawn-->
            <td>64%</td><!--FO%-->
            <td>50%</td><!--PP%-->
            <td>100%</td><!--PK%-->
            <td>9</td><!--Hits-->
            <td>14</td><!--BS-->
            <td>6</td><!--TA-->
            <td>11</td><!--OMA-->
            <td>2</td><!--OZP-->
            <td>22</td><!--CF-->
            <td>14</td><!--CA-->
            <td>+8</td><!--C +/1-->
            <td>18</td><!--TO-->
        </tr>
        </tbody>
    </table>
</main>

Essentially, I've tried to parseInt the .to-num class from a string to an integer, then if that integer is < or > 3, add either a 'negative' or 'positive' class, which will then change the font color from black to red or green.

for (var i = 0; i < $(".to-num").length; i++) {
var outcome = parseInt($(".to-num")[i]);
if (outcome > 3) {
    $(".to-num").addClass("negative");
} else if (outcome < 3) {
    $(".to-num").addClass("positive");
}

}

Here's a CodePen to my HTML, CSS and JS: https://codepen.io/emilyengelnatzke/pen/qBNOQZe

Solution

You need to set the class back on the same same element. As it is, you are setting the class on all elements each time. Also, you need a call to innerText or textContent before your parse

You can do:

$(".to-num").each(function() {
  var outcome = parseInt(this.innerText);
if (outcome > 3) {
    this.classList.add("negative");
} else if (outcome < 3) {
    this.classList.add("positive");
}
});