JSFiddle - React, Tailwind, and code Playground

by Bharat Patel

HTML

<form id='group'>
        <input type="radio" name="group1" class="trigger content" data-rel="sim-micro-desktop" />
        <input type="radio" name="group1" class="trigger" data-rel="sim-mini-desktop" />
        <input type="radio" name="group1" class="trigger" data-rel="sim-maxi-desktop" />
        <input type="radio" name="group1" class="trigger" data-rel="sim-mega-desktop" />

<div class="billpay-internet-add-ons">
    <input type="text" required="required" class="sim-micro-desktop content"/>
    <input type="text" required="required" class="sim-mini-desktop content"/>
    <input type="text" required="required" class="sim-maxi-desktop content"/>
    <input type="text" required="required" class="sim-mega-desktop content"/>
</div>

    <input type="submit"/>
    
</form>

CSS

.content {
    display: none;
}

JavaScript

$('.trigger').click(function() {
    $('.content').hide();
    $('.' + $(this).data('rel')).show();
});

$(".content").each(function(){
  var cls = $(this).attr("data-rel");
    if(cls != ''){ 
        $("."+cls).hide();
    }
  });