JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id="myDiv"></div>

<div id="create">CLICK</div>

CSS

.red {border-color:red;}

JavaScript

function id(x) {var y = document.getElementById(x);return y;}

//Create array of options to be added
var array = ["Please Select","Saab","Mercades","Audi", "Tan"];
var array2 = ["Please Select","Blue","Green","Red", "Black"];

function createSelect(i,l,a,c) {
l = id(l);

var label = document.createElement("label");
label.for = i;
label.innerHTML = "What?";
l.appendChild(label);
//Create and append select list
var selectList = document.createElement("select");

selectList.id = i;
selectList.name = i;
selectList.className = c;
l.appendChild(selectList);

//Create and append the options
for (var x = 0; x < a.length; x++) {
var option = document.createElement("option");
option.value = a[x];
option.text = a[x];
selectList.appendChild(option);
}
}

id("create").addEventListener("click", function() { 
createSelect('bob','myDiv',array,'');
createSelect('bob','myDiv',array2,'red');
});