JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input value="12" class="in" type="text">
    <input value="10" class="in" type="text">
    <input value="16" class="in" type="text">
    <input value="2" class="in" type="text">
    <input value="12" class="out" type="text">
    <input value="3" class="out" type="text">
    <input value="9" class="out" type="text">
    <input value="7" class="out" type="text">
    <input type="submit" id="submit" value="Submit">
</form>

JavaScript

var numIn = 0;
var numOut = 0;
var total;

$('#submit').click(function() {
    $('input.in').each(function() {
        return numIn += (parseFloat(this.value) || 0);
    });
    $('input.out').map(function() {
        return numOut += (parseFloat(this.value) || 0);
    });
    total = numIn - numOut;

    $('span').remove();
    $('body').append('<span>&#163;' + total + '</span>');
    $('span').fadeIn(250);
    return false;
});