JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <script type="text/javascript">
        function myJSFunction(element) {
            var row = element.parentNode.parentNode;
        
            switch (element.options[element.selectedIndex].innerHTML) {
                case "Pending":
                    row.style.background = "#FF7E00";
                    break;
                case "Approved":
                    row.style.background = "green";
                    break;
                case "Disapproved":
                    row.style.background = "red";
                    break;
                default:
                    row.style.background = "white";
            }
        }
    </script>
</head>
<body>
    <table>
        <tr>
            <td>
                <select onchange="myJSFunction(this)">
                    <option></option>
                    <option>Approved</option>
                    <option>Pending</option>
                    <option>Disapproved</option>
                </select>
            </td>
            <td>&nbsp;</td>
            <td>Here is some text</td>
        </tr>
        <tr>
            <td>
                <select onchange="myJSFunction(this)">
                    <option></option>
                    <option>Approved</option>
                    <option>Pending</option>
                    <option>Disapproved</option>
                </select>
            </td>
            <td>&nbsp;</td>
            <td>Here is some text</td>
        </tr>
    </table>
</body>
</html>