JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button"
value="Add Selector!"
onclick="addSelector()"/>
<div id="check0">
<select id="select0" name="select0" onchange="changeType(this.value, this.value)">
<option selected>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
</select>
</div>
JavaScript
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(index) {
return function() {
changeType(this.value, index)
}
})(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;
}
}