JSFiddle - React, Tailwind, and code Playground

HTML

<div class="webform-component-select">
    <label>Select amount #1</label>
    <select>
        <option selected="selected">None</option>
        <option>$200</option>
        <option>$300</option>
    </select>
    <p>
        <label>Select amount #2</label>
        <select>
            <option selected="selected">None</option>
            <option>$200</option>
            <option>$300</option>
        </select>
        <p>
            <label>Some random select list</label>
            <select>
                <option selected="selected">None</option>
                <option>This list has no dollar sign, so do not calculate it whatever is selected in here</option>
            </select>
            <p>
                <label>Total amount</label>
                <input disabled id="total">
</div>

JavaScript

$(document).ready(function () {
    var $selects = $("select").change(function (e) {
        var total = 0;
        $selects.each(function() {
            var val = this.value.match(/^\$(\d+)$/);
            total += val ? +val[1] : 0;
        });
        $("#total").val(total);
    });
});