JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="Increase" onclick="increase()"></input>
<input type="button" value="Decrease" onclick="decrease()"></input>
<div class="example">
</div>

CSS

.red {
    background-color: #FAA;
}

JavaScript

var table = d3.select(".example")
    .append("table");

var data = [1,2,3,4,5,6,7,8,9,10];

var scoreIndex = 4;
var oldIndex = 4;

var tr = table.selectAll("tr")
              .data(data);

tr.enter().append("tr");

updateData();
function updateData() {
    tr.each(function(d,i) {
        var td = d3.select(this)
                   .selectAll("td")
                   .data([d])
        .text(function(d) { return d; });
        
    
        td.enter()
          .append("td")
        .text(function(d) { return d; });
    });

    d3.select(tr[0][oldIndex]).attr("class", "");
    d3.select(tr[0][scoreIndex]).attr("class", "red");
    oldIndex = scoreIndex;
}

function increase() {
    scoreIndex++;
    updateData();
}

function decrease() {
    scoreIndex--;
    updateData();
}