JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<form id="my-form">
    <label>This one is used: <input class="foo"/></label>
    <br/>
    <label>So is this one: <select class="foo">
        <option>5</option>
        <option>10</option>
        <option>15</option>
    </select></label>
    <br/>
    <label>This one is ignored: <input class="ignore"/></label>
    <br/><br/>
    <p>Total: <span id="money-out"/></p>
</form>

JavaScript

var $form = $('#my-form'),
    $summands = $form.find('.foo'),
    $sumDisplay = $('#money-out');

$form.delegate('.foo', 'change', function ()
{
    var sum = 0;
    $summands.each(function ()
    {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplay.text(sum);
});