JSFiddle - React, Tailwind, and code Playground

HTML

<form method="" action="">
    <input type="text" id="ime" placeholder="Vnesi ime izdelka" />
    <br />
    <input type="text" id="cena" placeholder="Vnesi ceno" />
    <br/>
    <input type="radio" name="zaloga" value="true">Je na zalogi
    <br />
    <input type="radio" name="zaloga" value="false">Ni na zalogi
    <br />
    <input type="submit" value="Pošlji">
</form>
<div id="napake"></div>
<br />
<table border="1">
    <tr>
        <th>Ime izdelka</th>
        <th>Cena izdelka</th>
        <th>Zaloga</th>
    </tr>
</table>
<div id="sumaZaloga">Znesek artiklov na zalogi</div>
<div id="sumaNiZaloge">Znesek artiklov, ki niso na zalogi</div>
<input type="button" id="ponastavi" value="Ponastavi vse" />
<br />

CSS

#sumaZaloga, #sumaNiZaloge {
    color: blue;
    border: 1px dotted #333;
    padding: 2px;
    width: 250px;
    margin: 5px 0px;
}
#napake {
    color: red;
    padding: 2px;
    width: 150px;
    margin: 5px 0px;
}

JavaScript

var App = new Object();

App['evaluate'] = function () {
    var name = $('input#ime').val(),
        price = $('input#cena').val(),
        stock = $('input[name="zaloga"]:checked').val();

    $('#napake').html('');
    if (name === '' && price === '' && (typeof stock === 'undefined')) {
        return false;
    }

    var flag = true;

    if (name === '') {
        $('#napake').append('<div>Vnesi ime izdelka!</div>');
        flag = false
    };
    if (price === '') {
        $('#napake').append('<div>Vnesi ceno izdelka!</div>');
        flag = false
    } else if (isNaN(parseFloat(price))) {
        $('#napake').append('<div>Cena izdelka mora biti številka!</div>');
        flag = false
    };
    if (typeof stock === 'undefined') {
        $('#napake').append('<div>Izberi ali je izdelek na zalogi!</div>');
        flag = false
    };

    return flag;
}

$(document).on('keyup change', 'input', App['evaluate']);

$(document).on('click', 'input[type="submit"]', function () {
    if (!App['evaluate']()) {
        return false; /* prepreči dejansko submitanje forme, ki je default behaviour */
    };

    var name = $('input#ime').val(),
        price = parseFloat($('input#cena').val()),
        stock = $('input[name="zaloga"]:checked').val() === 'true';

    var html = '<tr><td>' + name + '</td><td>' + price + '</td><td>' + (stock ? 'Je na zalogi' : 'Ni na zalogi') +
        '</td></tr>';

    $('table').append(html);

    $(document).trigger('sumup');
    $(document).trigger('clean_input');

    return false; /* prepreči dejansko submitanje forme, ki je default behaviour */
});

$(document).on('sumup', function () {
    var sum_in_stock = 0,
        sum_not_in_stock = 0;

    $('table tr:not(:first-child)').each(function () {
        if ($(this).find('td:nth-child(3)').text() === 'Je na zalogi') {
            var price = parseFloat($(this).find('td:nth-child(2)').text());
            sum_in_stock += price;
        } else {
            var price =...