Overwrite css on particular column cell

This is my code to create a table, I have 3 arrays array1 , array2 and result. I am creating different columns out of them. In third column I am putting a condition to change the color of text according to whether the number is negative/positive/neutral. In neutral and In not a number condition, I am keeping it as black.

Due to this condition the css is being applied on header also i.e on result[0]. How can i avoid applying the neutral class to first cell of Result Column. Is there any way I can specify css on just first cell of Result Column so that it has precedence over the other css applied

   array1 = ["Array1", "$161.90", "$53.30", "$186.20", "Match up to $350 ", "Match to $700 ", "$3,000.00", "$6,000.00", "$6,650.00", "$13,300.00", "None"]
array2 = ["Array2", "$11.30", "$53.80", "$18.00", "$350 ", "Match to $700 ", "$3,000.00", "$7,000.00", "$6,950.00", "Match up to $350 ", "Not available"]
result = ["Result Column", "-$1.30", "-$53.80", "$1.00", "$50 ", "Match to $700 ", "$3,000.00", "$7,000.00", "$6,950.00", "$350 ", "Not available"]
  
  var table
  var modalBody = $('<div id="modalContent"></div>');
  buildTable();
                //builds table from 2 column arrays and result array
                function buildTable() {
                    var modalTable = document.createElement("TABLE");
                    modalTable.setAttribute("id", "myTable");
                    modalBody.html(modalTable);
                    for (let i = 0; i < array1.length; i++) {
                        var row = document.createElement("TR");
                        row.setAttribute("id", "myTr" + i);
                        modalTable.appendChild(row);
                        var col1 = document.createElement("TD");
                        var col1_text = document.createTextNode(array1[i]);
                        var col2 = document.createElement("TD");
                        var col2_text = document.createTextNode(array2[i]);
                        var col3 = document.createElement("TD");
                        var col3_text = document.createTextNode(result[i]);
                        col1.appendChild(col1_text);
                        col2.appendChild(col2_text);
                        col3.appendChild(col3_text);
                        resultcomp = result[i].replace(/\$/g, '');
                       
                        if(resultcomp < 0 && !isNaN(resultcomp)){
                          
                            col3.setAttribute("class", "negative");
                        }
                        else if(resultcomp > 0 && !isNaN(resultcomp)){
                           
                            col3.setAttribute("class", "positive");
                        }
                        else {
                            col3.setAttribute("class", "neutral");
                        }
                        
                        row.appendChild(col1);
                        row.appendChild(col2)
                        row.appendChild(col3)

                    }
                    return table;
                }
                $(".modal-body").html(modalBody);

.negative{
    color: red;
    font-weight: 500;
}
.positive{
    color:green;
    font-weight: 500;
}
.neutral{
    color: black;
    font-weight: 500
}
#myTable > #myTr0{
    color: white !important;
    font-weight: 500;
}
td:first-of-type{
    color:white !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" onclick="hidemodal()" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body"></div>
                    <div class="modal-footer"></div>
                </div>
            </div>
        </div>