JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<div class="item">
<button class="order">button</button>
</div>
<div class="item">
<button class="order">button</button>
</div>
<div class="item">
<button class="order">button</button>
</div>
<div class="item">
<button class="order">button</button>
</div>
<div class="item">
<button class="order">button</button>
</div>

CSS

.item{
  border: 1px solid #ccc;
  display: inline-block;
  vertical-align: top;
  padding: 25px;
  background: #ddd;
}
.item-active{
  background: #555;
}

JavaScript

$(document).ready(function(){
	$('.order').on('click', function () {  		
  		$('.item-active').removeClass('item-active')
  		$(this).parent().addClass('item-active');
  });
});