JSFiddle - React, Tailwind, and code Playground

HTML

<select onChange="AA(this);BB(this);CC(this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<script type='text/javascript'>
    function AA(a) {
        a = a.value;
        b = document.getElementById("A");
        c= "A";
        d= c+a;
        e = document.getElementById(d);
        b.innerHTML = e.innerHTML;
    }
    function BB(a) {
        f = a.value;
        g = document.getElementById("B");
        h= "B";
        i= h+f;
        j = document.getElementById(i);
        g.innerHTML = j.innerHTML;
    }
    function CC(a) {
        k = a.value;
        l = document.getElementById("C");
        m= "C";
        n= m+k;
        o = document.getElementById(n);
        l.innerHTML = o.innerHTML;
    }</script>

<div id='A' style='display:'><h3>A1</h3></div>
<div id='A1' style='display:none'><h3>A1</h3></div>
<div id='A2' style='display:none'><h3>A2</h3></div>
<div id='A3' style='display:none'><h3>A3</h3></div>

<div id='B' style='display:'><h3>B1</h3></div>
<div id='B1' style='display:none'><h3>B1</h3></div>
<div id='B2' style='display:none'><h3>B2</h3></div>
<div id='B3' style='display:none'><h3>B3</h3></div>

<div id='C' style='display:'><h3>C1</h3></div>
<div id='C1' style='display:none'><h3>C1</h3></div>
<div id='C2' style='display:none'><h3>C2</h3></div>
<div id='C3' style='display:none'><h3>C3</h3></div>