JSFiddle - React, Tailwind, and code Playground

HTML

<select name="list" id="mylist"></select>
<pre id="html"></pre>

JavaScript

originalData = {
    1712: "Beers", 
    1709: "Geertruidenberg", 
    1710: "Netersel", 
    1713: "Hank", 
    1714: "Oudemolen", 
    1711: "Macharen", 
    1715: "Nistelrode"
};

var dataArray = [];
for (year in originalData) {
    var word = originalData[year];
    dataArray.push({year: parseInt(year), word: word});
}

dataArray.sort(function(a, b){
    if (a.word < b.word) return -1;
    if (b.word < a.word) return 1;
    return 0;
});

(function($, window) {
    $.fn.replaceOptions = function(options) {
        var self, $option;

        this.empty();
        self = this;

        $.each(options, function(index, option) {
            $option = $("<option></option>")
                .attr("value", option.year)
                .text(option.word);
            self.append($option);
        });
    };
})(jQuery, window);

$('#mylist').replaceOptions(dataArray);
$('#html').text(
    $('#mylist').html()
    .split('<').join('\n<')
    .split('>').join('>\n')
);