JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="choise-text-block">
  <div class="choise-text-item">
  1
  </div>
  <div class="choise-text-item">
  2
  </div>
  <div class="choise-text-item">
  3
  </div>
</div>

<div class="choise-text-block">
  <div class="choise-text-item">
  1
  </div>
  <div class="choise-text-item">
  2
  </div>
  <div class="choise-text-item">
  3
  </div>
</div>

<div class="choise-text-block">
  <div class="choise-text-item tr-option">
  1
  </div>
  <div class="choise-text-item tr-option">
  2
  </div>
  <div class="choise-text-item tr-option">
  3
  </div>
</div>

CSS

.choise-text-block {
  margin: 3rem 0;
  display: flex;
  justify-content: space-between;
  
}
.choise-text-item {
  background: rgba(0,0,0,0.3);
  margin: 1rem 0;
  min-width: 16rem;
  flex-shrink: 0;
  text-align: center;
}
.checked {
  background: rgba(150,6,28,0.3);
}

JavaScript

$(function() {
  $('.choise-text-block .choise-text-item').on( "click", function() {
  // $('.choise-text-block .choise-text-item').removeClass('active');
    //$(this).addClass('active');
    $(this).addClass("checked tr-selected").siblings().removeClass('checked tr-selected');
  });
});