JSFiddle - React, Tailwind, and code Playground

by vickythegme

HTML

<form id='group'>
  <label>
    <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
  </label>
  <label>
    <input type="radio" name="group2" class="sim-mini-btn trigger" data-rel="sim-mini-desktop" />
  </label>
  <label>
    <input type="radio" name="group4" class="sim-maxi-btn trigger" data-rel="sim-maxi-desktop" />
  </label>
  <label>
    <input type="radio" name="group3" class="sim-mega-btn trigger" data-rel="sim-mega-desktop" />
  </label>
</form>
<div class="billpay-internet-add-ons">
  <div class="sim-micro-desktop content">sim-micro</div>
  <div class="sim-mini-desktop content">sim-mini</div>
  <div class="sim-maxi-desktop content">sim-maxi</div>
  <div class="sim-mega-desktop content">sim-mega</div>
</div>
<button class="test">
  test
</button>

CSS

.content {
  display: none;
}

JavaScript

$('.test').click(function() {
 
  var len = $('input:radio:checked').length;
  var nxt = len+1;
  var getName = "group"+nxt;
   if(len == 0) {
  alert("select one");
  }else if(len == 1) {
  alert("select 2nd one");
  } else if(len == 2) {
  alert("select 3rd one");
  } else if(len == 3) {
  alert("select 4th one");
  }
  $('.content').hide();
  $('.' + $('input:radio:checked').data('rel')).show();
});