JSFiddle - React, Tailwind, and code Playground
HTML
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<body>
<div class="row">
<div class="plan-option span3 well">
<h3 class="plan-option-title">Product Name</h3>
<div class="plan-pricing">
<p class="plan-price">$x<span class="small"> one-time</span></p>
<div class="signup-btn">
<button type="button" class="product-select-radio-button btn-large btn-block btn" >select</button>
</div>
</div>
</div>
<div class="plan-option span3 well">
<h3 class="plan-option-title">Product Name</h3>
<div class="plan-pricing">
<p class="plan-price">$x<span class="small"> one-time</span></p>
<div class="signup-btn">
<button type="button" class="product-select-radio-button btn-large btn-block btn" >select</button>
</div>
</div>
</div>
<div class="plan-option span3 well">
<h3 class="plan-option-title">Product Name</h3>
<div class="plan-pricing">
<p class="plan-price">$x<span class="small"> one-time</span></p>
<div class="signup-btn">
<button type="button" class="product-select-radio-button btn-large btn-block btn" >select</button>
</div>
</div>
</div>
<div class="plan-option span3 well">
<h3 class="plan-option-title">Product Name</h3>
<div class="plan-pricing">
<p class="plan-price">$x<span class="small"> one-time</span></p>
<div class="signup-btn">
<button type="button" class="product-select-radio-button btn-large btn-block btn" >select</button>
</div>
</div>
</div>
</div>
</body>
JavaScript
$('.product-select-radio-button').on('click', function(e){
$('.product-select-radio-button').removeClass("active");
$(e.target).addClass("active");
});