JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<form id='group'>
    <label><input type="radio" name="group1" id="gruppe1"/>Gruppen</label>
    <label><input type="radio" name="group1" id="gruppe2"/>Gruppen 2</label> 
</form>


<div class="layergruppe1">
    <label>Value 1:<input type="number" name="group2" id="value1" value="0" /></label>
    <label>Value 2:<input type="number" name="group2" id="value2" value="0"  /></label>
    <label>Value 3:<input type="number" name="group2" id="value3" value="0"  /></label>
    <label>Value 4:<input type="number" name="group2" id="value4" value="0"  /></label>
</div>

<div class="layergruppe2">
    <label>Value 1:<input type="number" name="group3" id="value1" value="0" /></label>
    <label>Value 2:<input type="number" name="group3" id="value2" value="0"  /></label>
    <label>Value 3:<input type="number" name="group3" id="value3" value="0"  /></label>
</div>

JavaScript

$(document).ready(function(){
    $('.layergruppe1').hide();
    $('.layergruppe2').hide();
    
    $('form#group').click(function(){
        if($('#gruppe1').is(":checked")){
            $('.layergruppe1').hide();
            $('.layergruppe2').show();
        } else if($('#gruppe2').is(":checked")){
            $('.layergruppe2').hide();
            $('.layergruppe1').show();
        }     
    });
    
    
});