JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<button id="key">left</button>
<table class="editableTable">
  <tr>
    <td class="cat">rose11</td>
    <td class="cat">red12</td>
  </tr>
  <tr>
    <td class="cat">rose21</td>
    <td class="cat">red22</td>
  </tr>
  <tr>
    <td class="cat1">rose31</td>
    <td class="cat">red32</td>
  </tr>
  <tr>
    <td class="cat2">rose41</td>
    <td class="cat">red42</td>
  </tr>

CSS

.selected {
  background-color: lightblue;
}
.selected1 {
  background-color: lightblue;
}
.selected2 {
  background-color: lightblue;
}
.editableTable {
  position: static;
  width: 100%;
  border-collapse: collapse;
}
.editableTable td {
  border: 1px solid;
  height: 17px;
}
.editableTable .cellEditing1 input[type=text] {
  width: 100%;
  border: none;
  text-align: left;
  background-color: transparent;
}
.editableTable .cellEditing1 {
  padding: 0;
  height: 1px;
}
.mainfunctionstyle {
  color: yellow;
  font-weight: bold;
  font-size: 10px;
}
.sunfunctionstyle {
  color: black;
  font-weight: normal;
  font-size: 8px;
}
.taskstyle {
  color: red;
  font-weight: normal;
  font-size: 8px;
}

JavaScript

$(function() {
  $(".cat").dblclick(function() {
    var OriginalContent = $(this).text();
    $(this).addClass("cellEditing1")
    $(this).html("<input id='value' type='text' value='" + OriginalContent + "' />");
  })


  $('tr').click(function() {
    $('tr').removeClass('selected1');
    $(this).addClass('selected1');

  });


  $(".cat1").on("click", function() {
    $(this).removeClass('selected2')
    $(this).addClass('selected2');
  });

  $("#key").click(function() {

    var sl = parseInt($(".selected").css("padding-left"));
    sl = sl >= 20 ? "20" : "+=20";

    $(".selected").css({
      "padding-left": sl

    });
    var sq = parseInt($(".selected2").css("padding-left"));
    sq = sq >= 40 ? "40" : "+=20";

    $(".selected2").css({
      "padding-left": sq

    });
    $(".cat.selected").each(function() {
      var prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
      console.log('Current td index: ' + $(this).index());
      console.log('Previous td content: ' + prevTd.text());

      prevTd.addClass("mainfunctionstyle");
      prevTd.find('input').addClass("mainfunctionstyle");



    });

    $(".cat1.selected2").each(function() {

      var paddingLeftpl = parseInt($(this).css("padding-left"));
      if (paddingLeftpl == 40) {
        $(".selected2").addClass("taskstyle");
        $(".selected2").find('input').addClass("taskstyle");
      }

    });
  });
});