JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<div id='tot'>0</div>
<input id='btnAddInput' type='button' value='Add' />
<form id='myform'>
</form>

JavaScript

var counter;

function calculate() {
    var toAdd = $('#myform input');
    var tot = 0;
    for (var i = 0; i < toAdd.length; i++) {
        tot += toAdd[i].value * 1;
    }
    $('#tot').html(tot);
}

function add_item() {
    var tmpDiv = $("<div>");
    var tmpInput = $("<input>").attr({
        'name': 't' + counter++,
        'type': 'text',
        'value': '0',
        'class': 'digits'
    });
    tmpInput.change(function() {
        if ($('#myform').validate().element($(this))) {
            calculate();
        }
        else {
            $(this).val(0);
        }
    });
    tmpInput.blur(function() {
        if (!$('#myform').validate().element($(this))) {
            $(this).focus();
        }
    });
    tmpDiv.append(tmpInput);
    $('#myform').append(tmpDiv);
}
$('#btnAddInput').click(function() {
    add_item();
});
$('#myform').validate({
    focusInvalid: true
});
counter = 0;