JSFiddle - React, Tailwind, and code Playground

by ebiewener

HTML

<table>
    <tr><td><div class="icon"></div></td><td><input id="1_1" type="text"></td><td><input id="1_2" type="text"></td></tr>
    <tr><td><div class="icon"></div></td><td><input id="2_1" type="text"></td><td><input id="2_2" type="text"></td></tr>
    <tr><td><div class="icon"></div></td><td><input id="3_1" type="text"></td><td><input id="3_2" type="text"></td></tr>
</table>

CSS

.icon {height:10px; width:10px; margin-right:5px}

JavaScript

$(function(){
    $('input').keyup(function(){
        var row = $(this).parent().parent();
        var inputsChanged = 0;
        row.find('input').each(function(){
            if($(this).val() !== '') inputsChanged++;
        });
        if(inputsChanged === 1){
            row.find('.icon').css('background-color','red');
        }else if(inputsChanged === 2){
            row.find('.icon').css('background-color','green');
        }
    });
});