JSFiddle - React, Tailwind, and code Playground

HTML

<select id="listLookupAvailableItems"></select>
<button text="toggle" onclick="$('select').toggle();">
Toggle</button>

JavaScript

$(document).ready(function(){
    loadListBatch();
});

function loadList() {
    clearList();
    var start = new Date().getTime();
    var o = document.getElementById("listLookupAvailableItems")
    for (var i = 0; i < 6000; i++) {
        var option = document.createElement("option");
        option.text = 'ABCDF ' + i;
        option.value = option.text;
        o.add(option, o.options[null]);
    }
    console.log('Load time: ' + (new Date().getTime() - start));
}
    
function loadListBatch() {
    clearListBatch();
    var start = new Date().getTime();
    var o = document.getElementById("listLookupAvailableItems")
    var html = "";
    var conc = [];
   
    for (var i = 0; i < 10000; i++) {
        conc[i] = "<option value='"+'XYZ' + i+"'>"+'XYZ ' + i+"</option>";
        html += "<option value='"+'XYZ' + i+"'>"+'XYZ ' + i+"</option>";
    }
    //o.innerHTML = html;
    var anew = conc.join('');
    $(o).append(anew); // Using jQuery instead makes it work in IE
    console.log('Load time: ' + (new Date().getTime() - start));
}    

function clearList() {
    var start = new Date().getTime();
    document.getElementById("listLookupAvailableItems").options.length = 0;
    console.log('Clear time: ' + (new Date().getTime() - start));
    return false;
}
    
function clearListBatch() {
    var start = new Date().getTime();
    document.getElementById("listLookupAvailableItems").innerHTML = "";
    console.log('Clear time: ' + (new Date().getTime() - start));
    return false;
}

function log(txt) {
    document.getElementById('infoPanel').innerHTML += '</br>' + txt;
}