JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<select id="mySelect" onChange="updateOptionList(this.value,this.selectedIndex)" scrollbars="0">
    <option value="1">--1--</option>
    <option value="2">--2--</option>
    <option value="3">--3--</option>
    <option value="4">--4--</option>
    <option value="5">--5--</option>
    <option value="6">--6--</option>
    <option value="7">--7--</option>
    <option value="8">--8--</option>
    <option value="9">--9--</option>
    <option value="10">--10--</option>
    <option value="more">more</option>
</select>

JavaScript

var data = {
    json: $.toJSON({
        array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    })
}
var elmt;
var num = 1;

function updateOptionList(value, index) {
    if (value == 'more') {
        elmt = document.getElementById("mySelect");
        elmt.remove(elmt.selectedIndex);

        $.ajax({
            url: "/echo/json/",
            data: data,
            type: "POST",
            success: function (response) {
                $.each(response.array, function (index, value) {
                    opt = document.createElement("option");
                    opt.value = num * 10 + value;
                    opt.innerHTML = '--' + (num * 10 + value) + '--';
                    elmt.appendChild(opt);
                });

                opt1 = document.createElement("option");
                opt1.value = 'more';
                opt1.innerHTML = 'more';
                elmt.appendChild(opt1);

                num++;
            }
        });


    }
}