JSFiddle - React, Tailwind, and code Playground

by lostsoul

HTML

<form>
<input name="siblings">
</form>

<div id="total">
hello
</div>

CSS

input{display:block}

JavaScript

$("input[name='siblings']").on('keydown', function() {
    //is it the last input?
    if (this == $("input[name='siblings']:last", this.form)[0]) {
        //insert an empty clone of the current input
        $(this).after($(this).clone(true).val(''));
    }

    //try to get all elements
    var output = 0;
    $(this).parents('form') // For each element, pick the ancestor that's a form tag.
    .find(':input') // Find all the input elements under those.
    .each(function(i) {
        //alert(this.value+ " = " + i);
        if (this.value > 0) {
            var currentValue = parseFloat(this.value);
            output = output + currentValue;
        }
    });
    if (output < 100) {
        $("div#total").empty().append("value = " + output + "<br>");
    } else {
        $("div#total").empty().append("Sorry, your above 100%! You need more cash for that!");
    }
    //$("div#total").append("value = " + output + "<br>");

    })