JSFiddle - React, Tailwind, and code Playground
HTML
<div class="divContainer">
<div>Sizes</div>
<a class="sizes" href="#size=4" psize="4" border="0">
<div class="inDivSize">4</div>
</a>
<a class="sizes" href="#size=5" psize="5" border="0">
<div class="inDivSize">5</div>
</a>
<a class="sizes" href="#size=6" psize="6" border="0">
<div class="inDivSize">6</div>
</a>
</div>
<div class="divContainer">
<div>Prices</div>
<a class="prices" href="#pmin=30&pmax=40" pmin="30" pmax="40" border="0">
<div class="inDivPrice"> $30 - $40 </div>
</a>
<a class="prices" href="#pmin=40&pmax=50" pmin="40" pmax="50" border="0">
<div class="inDivPrice"> $40 - $50 </div>
</a>
<a class="prices" href="#pmin=50&pmax=60" pmin="50" pmax="60" border="0">
<div class="inDivPrice"> $50 - $60 </div>
</a>
</div>
CSS
.divContainer {
float: left;
width: 200px;
height: 80px;
border: 1px solid #000;
text-align: center;
}
.inDivSize:hover, .inDivPrice:hover {
background-color: yellow;
}
.inDivSizeClicked, .inDivPriceClicked {
background-color: yellow;
}
JavaScript
$(document).ready( function() {
$(".inDivSize").click(function() {
$(".inDivSize").removeClass("inDivSizeClicked");
$(this).addClass("inDivSizeClicked");
});
$(".inDivPrice").click(function() {
$(".inDivPrice").removeClass("inDivPriceClicked");
$(this).addClass("inDivPriceClicked");
});
$(".sizes").click(function(e) {
var psize = '#size='+ $(this).attr('psize');
$('.prices').each(function() {
var pmin = '&pmin=' + $(this).attr('pmin');
var pmax = '&pmax=' + $(this).attr('pmax');
$(this).attr('href', psize + pmin + pmax);
});
});
$('.prices').click(function() {
var pmin = '&pmin=' + $(this).attr('pmin');
var pmax = '&pmax=' + $(this).attr('pmax');
$('.sizes').each(function() {
var psize = '#size='+ $(this).attr('psize');
$(this).attr('href', psize + pmin + pmax);
});
});
});