JSFiddle - React, Tailwind, and code Playground

by Kamil

HTML

<table>
<tr><td><b>Rasa</b></td> <td><b>Opis</b></td></tr>
<tr><td valign="top">
<label><input type="radio" name="rasa" value="elf"> Elf</label><br />
<label><input type="radio" name="rasa" value="czlowiek"> Człowiek</label><br />
<label><input type="radio" name="rasa" value="krasnolud"> Krasnolud</label><br />
<label><input type="radio" name="rasa" value="hobbit"> Hobbit</label><br />
<label><input type="radio" name="rasa" value="ork"> Ork</label><br />
</td>
<td id="elf" valign="top">
Opis Elfa
</td>
<td id="czlowiek" valign="top">
Opis Czlowieka
</td>
<td id="krasnolud" valign="top">
Opis Krasnoluda
</td>
<td id="hobbit" valign="top">
Opis Hobbita
</td>
<td id="ork" valign="top">
Opis Orka
</td>
</tr>

<tr>
<td><b>Pochodzenie</b></td> <td><b>Opis</b></td></tr>
<td id="elf" valign="top">
<label><input type="radio" name="lokacja" value="Mithlond"> Mithlond</label><br />
<label><input type="radio" name="lokacja" value="Rivendell"> Rivendell</label><br />
<label><input type="radio" name="lokacja" value="Lothlorien"> Lothlórien</label><br />
<label><input type="radio" name="lokacja" value="WielkiZielonyLas"> Wielki Zielony Las</label><br />
</td>
<td id="czlowiek" valign="top">
<label><input type="radio" name="lokacja" value="Gondor"> Gondor</label><br />
<label><input type="radio" name="lokacja" value="Rohan"> Rohan</label><br />
<label><input type="radio" name="lokacja" value="Harad"> Harad</label><br />
<label><input type="radio" name="lokacja" value="Arnor"> Rhun</label><br />
<label><input type="radio" name="lokacja" value="Rhun"> Rhun</label><br />
<label><input type="radio" name="lokacja" value="Rhovanion"> Rhovanion</label><br />
</td>
<td id="krasnolud" valign="top">
<label><input type="radio" name="lokacja" value="Erebor"> Erebor</label><br />
<label><input type="radio" name="lokacja" value="Moria"> Moria</label><br />
<label><input type="radio" name="lokacja" value="ZelazneWzgorze"> Żelazne Wzgórza</label><br />
<label><input type="radio" name="lokacja"...

JavaScript

jQuery(function ($) {
    $("#elf, #czlowiek, #krasnolud, #hobbit, #ork").hide();
    
    $("[name=rasa]").change(function () {
        $("#elf, #czlowiek, #krasnolud, #hobbit, #ork").hide().filter("#" + this.value).show();
        $('[name=klasa]').prop( "checked", false ).hide();
        //$('td[name=klasa]').hide();
    });

    $("#Wojownik, #Rzemieslnik, #Zlodziej, #Mag").hide();
    
    $("[name=klasa]").change(function () {
        $("#Wojownik, #Rzemieslnik, #Zlodziej, #Mag").hide().filter("#" + this.value).show();
    });


    $("#Rycerz, #Fechmistrz, #Lowca, #Zwiadowca, #Medrzec, #Zaklinacz, #PrzyjacielNatury, #Uzdrowiciel, #Kowal, #Alchemik, #Fleczer, #Gornik, #Hodowca, #Jubiler, #Krawiec, #Lotrzyk, #Wlamywacz, #Zabojca").hide();
    
    $("[name=podklasa]").change(function () {
        $("#Rycerz, #Fechmistrz, #Lowca, #Zwiadowca, #Medrzec, #Zaklinacz, #PrzyjacielNatury, #Uzdrowiciel, #Kowal, #Alchemik, #Fleczer, #Gornik, #Hodowca, #Jubiler, #Krawiec, #Lotrzyk, #Wlamywacz, #Zabojca").hide().filter("#" + this.value).show();
    });


    $("#Niepraktykujacy, #Panteon, #Eru, #Manwe, #Ulmo, #Aule, #Orome, #Mandos, #Irmo, #Tulkas, #Melkor, #Varda, #Yavanna, #Nienna, #Este, #Vaire, #Vana, #Nessa").hide();
    
    $("[name=bog]").change(function () {
        $("#Niepraktykujacy, #Panteon, #Eru, #Manwe, #Ulmo, #Aule, #Orome, #Mandos, #Irmo, #Tulkas, #Melkor, #Varda, #Yavanna, #Nienna, #Este, #Vaire, #Vana, #Nessa").hide().filter("#" + this.value).show();
    });


    $("#Mithlond, #Rivendell, #Lothlorien, #WielkiZielonyLas, #Gondor, #Rohan, #Harad, #Arnor, #Rhun, #Rhovanion, #Erebor, #Moria, #ZelazneWzgorze, #GoryBlekitne, #Bree, #Shire, #GoryMgliste, #Mordor, #GorySzare").hide();
    
    $("[name=lokacja]").change(function () {
        $("#Mithlond, #Rivendell, #Lothlorien, #WielkiZielonyLas, #Gondor, #Rohan, #Harad, #Arnor, #Rhun, #Rhovanion, #Erebor, #Moria, #ZelazneWzgorze, #GoryBlekitne, #Bree, #Shire, #GoryMgliste, #Mordor,...