jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <h5>
  Select User Type
  </h5>

<table class="table table-bordered RTtbl " style="font-size:14px;">    
    <tr>
      <td style="width:33.33%;">
        <i class="fa fa-user"</i>
        User
      </td>
                    <td style="width:33.33%">
                         <i class="fa fa-user-o" ></i>
                        Vendor
                    </td>
                    <td style="width:33.33%">
                         <i class="fa fa-user-circle-o" ></i>
                       Celeb
                    </td>

                </tr>
</table>
<h5>
  Selected Users
  </h5>
<table class="table table-bordered Fatbl">
  <tr>
              <td> <i class="fa fa-user-circle-o" ></i>
                      Kisan </td>
            </tr>
  <tr>
              <td> <i class="fa fa-user-o" ></i>
                      Kisan </td>
            </tr>
  <tr>
              <td> <i class="fa fa-user-circle-o" ></i>
                      Kisan </td>
            </tr>
  <tr>
              <td> <i class="fa fa-user" ></i>
                      Kisan </td>
            </tr>
  <tr>
              <td> <i class="fa fa-user-o" ></i>
                      Kisan </td>
            </tr>
  <tr>
              <td> <i class="fa fa-user-circle-o" ></i>
                      Kisan </td>
            </tr>
  <tr>
              <td> <i class="fa fa-user" ></i>
                      Kisan </td>
            </tr>
  <tr>
              <td> <i class="fa fa-user-o" ></i>
                      Kisan </td>
            </tr>
</table>

CSS

.RTtbl {
  background:#fcffe5;
}

td {
  cursor: pointer;
}

.bg-info-red {
  background: red;
}

JavaScript

$(".RTtbl  .fa").click(function () {
	console.log($(".Fatbl").find(`.${this.className}`), this.className);
  $(".Fatbl").find(".bg-info-red").removeClass("bg-info-red");
  $(".Fatbl").find(`.${this.className.split(" ")[1]}`).parent().addClass("bg-info-red");
});