JSFiddle - React, Tailwind, and code Playground

HTML

<table style="width: 50%" id="myTable">
 <tbody>
 <tr><td>Row 1</td><td>dd</td><td>red</td><td>dd</td></tr>
 <tr><td>Row 2</td><td>dd</td><td>green</td><td>dd</td></tr>
 <tr><td>Row 3</td><td>dd</td><td>red</td><td>dd</td></tr>
 </tbody>
</table>
<a href="#" name="addRow">Add Row</a>

JavaScript

$(document).ready(function () {        
       $("a[name=addRow]").click(function() {
                $("table#myTable tr:last").after('<tr><td>Row 4</td><td>dd</td><td>green</td><td>dd</td></tr>');
                repaint();
                return false;
           
        });
    
    function repaint() {
    $('#myTable tbody tr td').each(function()
{
    if ($(this).text() == 'red')
    {
        $(this).parent().css('background-color', 'red');
    }
    else if ($(this).text() == 'green')
    {
        $(this).parent().css('background-color', 'green');
    }
});
}
                  repaint();
    
 });