JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="link-chart lx-link-chart">
  <div class="link-selector-one">
    <div class="link-selector-two">One</div>
  </div>
</a>

<a href="#" class="link-chart lx-link-chart">
  <div class="link-selector-one">
    <div class="link-selector-two">Two</div>
  </div>
</a>

<a href="#" class="link-chart lx-link-chart">
  <div class="link-selector-one">
    <div class="link-selector-two">Three</div>
  </div>
</a>

SCSS

.link-chart {
  background-color: green;
  border-radius: 4px;
  color: white;
  display: block;
  font-family: sans-serif;
  height: 40px;
  line-height: 40px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  transition: opacity .2s ease;
  width: 200px;
  
  &.disabled {
    pointer-events: none;
    opacity: 0.25;
  }
  
  &:nth-child(2) {
    background-color: blue;
  }
}

JavaScript

var $linkChart = $('.link-chart');

$linkChart.click(function(e) {
	$linkChart.each(function() {
  	if (e.currentTarget !== this) {
    	$(this).toggleClass('disabled');
    }
  });
});