JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<input type="text" size="5" id="value1" name="value1" class="value" />Value 1
<br />
<input type="radio" id="value5" name="value2" class="value" value="5" />
<label for="value5">+ 5</label>
<br />
<input type="radio" id="value10" name="value2" class="value" value="10" />
<label for="value10">+ 10</label>
<br />Value 4
<select name="value4" id="value4" class="value">
    <option value="0">0</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
</select>
<hr />Total
<input type="text" size="5" id="total" readonly="readonly" class="bckground" name="total" />

CSS

#total {
    border:none;
    color:#ff0000;
    font-size:30px;
}

JavaScript

jQuery(document).ready(function ($) {
    var $value = $('.value');
    $value.on('input change', function (e) {
        var total = 0;
        $value.each(function (index, elem) {
            if ($(elem).is("input[type='radio']") && (!$(elem).is(":checked"))) return;
            if (!Number.isNaN(parseInt(this.value, 10))) total = total + parseInt(this.value, 10);
        });
        $('#total').val(total);
    });
});