JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        
        
        <title>Javascript Test</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
</head>

<body>

<select id="mySelect" onchange="npup.doSelect(this);">
    <option value="">-- select --</option>

    <!-- the option values are suffixes for the elements to show -->
    <option value="0">1</option>
    <option value="1">2</option>
    <option value="2">3</option>
    <option value="3">4</option>
    <option value="4">5</option>

    <option value="5">6</option>
    <option value="6">7</option>
    <option value="7">8</option>
    <option value="8">9</option>
    <option value="9">10</option>
    <option value="10">11</option>

</select>


<div id="mySpecialElements"><div id="npup0" class="hidden">one div</div><div id="npup1"     class="hidden">second div</div><div id="npup2" class="hidden">third div</div><div id="npup3" class="hidden">fourth div</div><div id="npup4" class="hidden">fifth div</div><div id="npup5" class="hidden">sixth div</div><div id="npup6" class="hidden">seventh div</div><div id="npup7" class="hidden">eighth div</div><div id="npup8" class="hidden">ninth div</div><div id="npup9" class="hidden">tenth div</div><div id="npup10" class="hidden">eleventh div</div><div id="npup11" class="hidden">twelfth div</div></div>

</body>
</html>

JavaScript

window.npup = (function (containerId, baseId) {
    // save the container of your special element
    var elementsContainer = document.getElementById(containerId);
    var baseId = baseId;
    function doSelect(select) {
        // get value of select
        var value = select.value;
        // find element based on the value of the select
        var targetDiv = findElement(value);
        // do magic..
        hideAll(elementsContainer);
        
        if (!targetDiv) { return;} // didn't find the element, bail
        
        showElement(targetDiv);
    }
    // retrieve some element based on the value submitted
    function findElement(value) {
        return document.getElementById(baseId+value);
    }
    // hide all element nodes within some parent element
    function hideAll(parent) {
        var children = parent.childNodes, child;
        // loop all the parent's children
        for (var idx=0, len = children.length; idx<len; ++idx) {
            child = children.item(idx);
            // if element node (not comment- or textnode)
            if (child.nodeType===1) {
                // hide it
                child.style.display = 'none';
            }
        }
    }
    
    // display a certain element
    function showElement(element) {

    element.style.display = '';
     //alert(element.id )
    var tee = element.id
    // var gh = tee.charAt(tee.length-1);  // get the int form id will (fail if GT 9)
    var gh = tee.slice(-1);

    // if id GT 0 
    if(gh  > 0){
       var elms = document.getElementById('mySpecialElements');

      // get all child nodes within mySpecialElements       
      for (var i = 0; i < gh ; i++) {
      // if DIV display elements by id as block
        if(elms.nodeName == "DIV"){ 
      document.getElementById(elms.childNodes[i].id).style.display = "block";
        }
       }
    }

    } 
    // hide all on page load (might want some extra logic here)
    hideAll(elementsContainer);

    // export api to use...