JSFiddle - React, Tailwind, and code Playground

HTML

<label>Sizes
    <select name="item_options[product_size]" id="productSize">
        <option value="s">small - 10</option>
        <option value="m">medium - 1</option>
        <option value="l">large - 5</option>
        <option value="xl">extra large - 10</option>
    </select>
</label>
<label>Quantity
    <select name="quantity" id="quantity"></select>
</label>

JavaScript

$(document).ready(function () {
    $("#productSize").change(function () {
        var me = $(this);
        var avail = me.find("option:selected").html().split("-")[1].trim();

        $("#quantity option").each(function () {
            $(this).remove();
        });

        for (var i = 1; i <= avail; i++) {
            $("#quantity").append("<option>" + i + "</option>");
        }
    });
});