JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="col-md-6">
    <div class="content">
      <div class="howTheAppWorksContent addEvent" id="howTheAppContent">
        <img id="myImage" src="http://localhost/projects/rrs-website/wp-content/uploads/2021/11/how-the-app-works.png" alt="">
      </div>
    </div>
  </div>
  <div class="col-md-6" id="appWorksList">
    <table>
      <tr class='custom-class active' id="addEvent" onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/how-the-app-works.png', 'addEvent')">
        <td>1</td>
      </tr>
      <tr class='custom-class' onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/fill-the-forms.png', 'fillTheForm')">
        <td>2</td>
      </tr>
      <tr class='custom-class' onclick="howAppWorks('http:\/\/localhost/projects/rrs-website/wp-content/uploads/2021/11/rrt-flow-sheet.png', 'rrtFlowSheet')">
        <td>3</td>
      </tr>
    </table>
  </div>
</div>

CSS

.active {
  background: blue;
}

JavaScript

function howAppWorks($imgUrl, $myClass, event) {
  document.getElementById('myImage').src = $imgUrl;
  document.getElementById("howTheAppContent").classList.remove('addEvent', 'fillTheForm', 'rrtFlowSheet');
  document.getElementById("howTheAppContent").classList.add($myClass);

  // Add active class to the current button (highlight it)


}
var header = document.getElementById("appWorksList");
var btns = header.getElementsByClassName("custom-class");

for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    console.log(2)
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}