JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Test Load</h1>

<input type="text" maxlength="30" list="carList" id="carSearchBox" name="carSearchBox" pattern="[A-Za-z '-]*$" placeholder="search cars" autofocus autocomplete="on">
<datalist id="carList"></datalist>
<select id="carList2"></select>
<button onClick="hello(); return false;">Click to load</button>

JavaScript

function hello() {
    alert('Hello');
}

function loadData() {
    alert(1);
    $(data.osCars).each(function (idx, o) {
        alert(o.id);
        carsOption = "<option value=\"" + o.id + "\">" + o.name + "</option>";
        $('#carList2').append(carsOption);
    });
}

var data = {
    "osCars": [{
        "id": 1,
            "name": "Cadillac",
            "type": "Sedan",
            "desc": "A fine American automobile"
    }, {
        "id": 2,
            "name": "BWM",
            "type": "Sedan",
            "desc": "A fine German automobile"
    }, {
        "id": 3,
            "name": "Lexus",
            "type": "Sedan",
            "desc": "A fine Japanese automobile"
    }]
};