JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>7</td></tr>
    <tr><td>8</td><td>9</td><td>10</td></tr>
</table>
<button>Check constraints</button>

CSS

td {
    width:100px;
    height:50px;
    border:1px solid black;
}
table {
    border:1px solid black;
    border-collapse:collapse;
}
td.invalid {
    background:red;
}

JavaScript

$('td').attr('contenteditable',true);
var cell;
console.clear();
function highlight(){    
    $(arguments).toggleClass('invalid',true);
}
function checkConstraints(e){
    //reset style before re-checking
    $('td.invalid').toggleClass('invalid');
    //get rows as an array of array
    var rows = $('tr').map(function(elem,i){
        return [$(this).children('td').toArray()];
    }).toArray();        
    //loop through the rows
    for(var i = 0; i < rows.length; i++){
        cell = {};        
        for(var j = 0; j < rows[i].length; j++){
            if(cell[rows[i][j].innerText]) {  
                highlight(cell[rows[i][j].innerText], rows[i][j]);                
            } else {
                cell[rows[i][j].innerText] = rows[i][j];
            }
            if(i < rows.length - 1 && rows[i][j].innerText == rows[i+1][j].innerText) {               
               highlight(rows[i][j],rows[i+1][j]);
            }            
        }        
    }
}
$('button').click(checkConstraints);