JSFiddle - React, Tailwind, and code Playground

by Darcy Voutt

HTML

<select class="operations-supplier" name="operations-supplier">
    <option data-selected="latam" data-capacity="300000" value="30">LATAM - Supplier A</option>
    <option data-selected="na" data-capacity="200000" value="20">NA - Supplier B</option>
    <option data-selected="asia" data-capacity="400000" value="40">ASIA - Supplier C</option>
    <option data-selected="africa" data-capacity="500000" value="50">AFRICA - Supplier D</option>
    <option data-selected="emea" data-capacity="600000" value="60>">EMEA - Supplier E</option>
</select>
<input type="text" class="operations-supplierCapacity" name="operations-supplierCapacity" readonly />

JavaScript

var supplierCapacity = function (select, dataAttr, output) {
        var reloadCapacity = function () {
            var capacityValue = $(select).find(':selected').data(dataAttr);
            $(output).val(capacityValue);
        };
        $(document).ready(function () {
            // Select Change
            $(select).change(function () {
                reloadCapacity();
            });
            $(select).trigger('change');
        });
    };

    supplierCapacity('select.operations-supplier', 'capacity', '.operations-supplierCapacity');