JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head><title>Table Data Change</title></head>
<body id="datachange" class="demo">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>DATA</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Differdange</td>
        <td></td>
      </tr>
      <tr>
        <td>Dippach</td>
        <td></td>
      </tr>
      <tr>
        <td>Dippach</td>
        <td></td>
      </tr>
      <tr>
        <td>Differdange</td>
        <td></td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSS

<style type="text/css">

 .highlighted { background-color: Orange; color: White; }  
    
</style>

JavaScript

var data = {
  "Differdange" : [ "Differdange 1", "Differdange 2", "Differdange 3", "Differdange 4" ],
  "Dippach" : [ "Dippach 1", "Dippach 2", "Dippach 3", "Dippach 4", ]
};
function pushData(id, col) {
  $("#datachange table td:nth-child(" + 2 + ")").each(function(i, v) {
    $(this).html(data[id][i])
  });
}

$(function() {
  $("#datachange td").click(function() {
    var idx = $(this).index() + 1;
    $("td:nth-child(" + idx + ")").removeClass("highlighted");
    $(this).addClass("highlighted");
    pushData($(".highlighted").html(), 2);
  });
});