problem z formularzem js

Cześć potrzebuję zrobić formularz w którym będę miał 3 opcje do wybory zależnie którą opcje wybiorę, chciałbym aby pod wyborem podmieniał się HTML z tabelami przypisany do odpowiedniej kategorii.

Chciałem to zrobić używając inner HTML ale umiem tylko zmienne podmieniać w ten sposób, a nie kod html.

Wujek google mi nie pomógł, a przynajmniej ja nie potrafię znaleźć rozwiązania, więc was proszę o pomoc. Z góry dziękuję.

# HTML BODY
 
<div id="pin">
        <label>
               <input type="radio" name="Material" value="Materiał1"> Materiał1
        </label>
 
        <label>
                <input type="radio" name="Material" value="Materiał2"> Materiał2
        </label>
        <label>
                <input type="radio" name="Material" value="Materiał3"> Materiał3              
        </label>
</div>

Przykładowa tablica, domyślnie mają być 3 i każda ma być przaypisana do swojego "pola wyboru".

# javascript
 
<table>       
                    <tr>
                        <td>RS</td>
                        <td align="center">
                            <input type="number" min="0" max="13" value="12" id="war" class="warstwy">
                        </td>
                    </tr>
                    <tr>
                        <td>RW</td>
                        <td align="center">xx</td>
                    </tr>
</table>

Do każdej tabelki dodaj ID, np. id="tabelka-1",id="tabelka-2", itd. A potem to samo ID pododawaj do value w radio buttonach. I potem sprawdzasz value klikniętego radio buttona i pokazujesz tabelkę mającą to ID.

Możesz też użyć bootstrapa: https://getbootstrap.com/docs/4.3/components/navs/#javascript-behavior

https://validatejs.org/
https://www.w3schools.com/js/tryit.asp?filename=tryjs_validation_check