JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form">
	<select id="sel">
		<option>foo1</option>
		<option>foo1</option>
		<option>foo1</option>
		<option>foo1</option>
	</select>
    <button type="button" id="clear">Change options</button>
</form>

JavaScript

window.onload = function () {
    var populate_datalist_from_array = function(list_id, list_str) {
			var arr = eval(list_str),
				i, opt;
			clearChildren(list_id);
			for (i = 0; i < arr.length; i++) {
				opt = document.createElement('option');
				opt.innerHTML = arr[i];
				opt.value = arr[i];
				document.getElementById(list_id).appendChild(opt);
			}
		},
		clearChildren = function (parent_id) {
			var childArray = document.getElementById(parent_id).children;
			if (childArray.length > 0) {
				document.getElementById(parent_id).removeChild(childArray[0]);
				clearChildren(parent_id);
			}
		},
		list = "['newFoo1', 'newFoo2', 'newFoo3', 'newFoo4', 'newFoo5']";
	document.getElementById('clear').addEventListener('click', function () {
		populate_datalist_from_array('sel', list);
	}, false);
}