JSFiddle - React, Tailwind, and code Playground

by Christoph Voigt

HTML

<script>
var i = 0;
var selectArray = [];
    
function addSelector(){
    
var container = document.getElementById("check0");
    
selectArray[i] = document.getElementsByName("select0")[0].cloneNode(true);
    
selectArray[i].name = 'select'+i;
selectArray[i].onchange = function(v, i) {
        return function() {
           changeType(v, i)
        }
    }(this.value, i);

container.appendChild(selectArray[i]);
}
    
function changeType(selected, i) {
    switch (selected) {
        case 'One':
           alert(selected+' , '+i);
            break;
        case 'Two':
            alert(selected+' , '+i);
            break;          
        case 'Three':
            alert(selected+' , '+i);
            break;
        case 'Four':
            alert(selected+' , '+i);
            break;
        case 'Five':
            alert(selected+' , '+i);
            break;
    }
    }
</script>
<input type="button"
       value="Add Selector!"
       onclick="addSelector()"/>
<div id="check0">
<select id="select0" name="select0" onchange="changeType(this.value, 0)">
    <option selected>One</option>
    <option>Two</option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
</select>
</div>