JSFiddle - React, Tailwind, and code Playground

HTML

<div id="table1">
    <select id="sel1">
        <option>1</option>
        <option>2</option>
        <option selected>3</option>
    </select>
    <select id="sel2">
        <option selected>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div id="table2">
    <select id="sel3">
        <option>1</option>
        <option selected>2</option>
        <option>3</option>
    </select>
    <select id="sel4">
        <option selected>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>

CSS

.selected {
border: 1px solid red;
}

JavaScript

(function(){
    var selects = document.getElementsByTagName('select'),
        i = 0,
        selectLength = selects.length;
    
    var applyParentChange = function(node, val){
        var currentEdits = node.getAttribute('data-edits') || 0;
        currentEdits = parseFloat(currentEdits, 10) + val;
        if(currentEdits <= 0) {
            currentEdits = 0;
            node.className = '';
        } else {
            node.className = 'selected';
        }
        
        node.setAttribute('data-edits',currentEdits);
        
    };
    
    var onSelectChange = function(){
        var defaultIndex = parseFloat(this.getAttribute('data-default'),10);
        if(defaultIndex === this.selectedIndex){
            applyParentChange(this.parentNode, -1);
            this.className = '';
        } else {
            applyParentChange(this.parentNode, 1);               this.className = 'selected'; 
        }
        
    };
    
    for(i=0; i<selectLength; i+=1){
        selects[i].setAttribute('data-default',selects[i].selectedIndex);
        selects[i].onchange = onSelectChange;
    }
    
    
    
})();