JSFiddle - React, Tailwind, and code Playground

HTML

<input id="test" type="text" list="mylist"/>
<datalist id="mylist"></datalist>

JavaScript

$(function() {
    // assume this data is coming from ajax call
    var data = [{
        "name": "John",
        "id": 1
    }, {
        "name": "Jane",
        "id": 2
    }, {
        "name": "Judie",
        "id": 3
    }];

    var generateDropDown = function(data) {
        var datalist = $('#mylist');

        for (var i = 0; i < data.length; i++) {
            var value = data[i].name + ' => ' + data[i].id;
            $('<option>', {
                    'class': 'myclass'
                })
                .val(value)
                .data('extra', {
                    'newid': data[i] * 100
                })
                .appendTo(datalist);
        }
    };
    
    generateDropDown(data);

    $('.myclass').on('select', function(selected) {
        console.log($(selected).data('extra'));
    });
});