JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<input type="radio" name="o1" value="sell" checked> Sell
<br>
<input type="radio" name="o1" value="transport"> Transport
<br>
<input type="radio" name="o1" value="buy"> Buy
<br>
<div class='buy'>
  Buy #1</div>
<div class='buy'>
  Buy #2</div>
<div class='buy'>
  Buy #3</div>
<div class='transport'>
  Transport A
</div>
<div class='transport'>
  Transport B
</div>
<div class='transport'>
  Transport C
</div>
<div class='sell'>
  Sell I
</div>
<div class='sell'>
  Sell II
</div>
<div class='sell'>
  Sell III
</div>
</div>
<div class='sell'>
  Sell IV
</div>

CSS

.buy {
  display: none;
  border: 1px solid red
}

.transport {
  display: none;
  border: 1px solid blue
}

.sell {
  display: none;
  border: 1px solid green
}

JavaScript

$(function() {
  var oldValue;

  $('input[name="o1"]').on('click', function() {
    buttonValue = $(this).val();

    // hide what was showing
    $('.' + oldValue).hide();
    //show the new selection
    $('.' + buttonValue).show();

    oldValue = buttonValue;

  });
});