JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<script src="http://tommywebdesigner.com/jeditable/js/jquery.jeditable.js"></script>
        <table cellpadding="0" cellspacing="0" border="0" align="center" id="table-data">
            <tr class="tr_clone">
                <td width="450" valign="top">
                    <div style="height: 15px;">
                        <p class="editable_textarea">- Option Num 1</p>
                    </div>
                </td>
                <td width="10" valign="top">
                    <div style="height: 20px;">
                        <p style="text-align: right;">€</p>
                    </div>
                </td>
                <td width="90" valign="top">
                    <div style="height: 20px;">
                        <p class="editable_number" id="sum1" style="text-align: right;">9</p>
                    </div>
                </td>
                <td width="250" valign="top">
                    <input type="button" name="add" value="+" class="tr_clone_add">
                    <input type="button" name="less" value="-" class="tr_clone_remove">
                </td>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0" border="0" align="center" id="table-data">
            <tr class="tr_clone">
                <td width="450" valign="top">
                    <div style="height: 20px;">
                        <p class="editable_textarea">- Option number 2.</p>
                    </div>
                </td>
                <td width="10" valign="top">
                    <div style="height: 20px;">
                        <p style="text-align: right;">€</p>
                    </div>
                </td>
                <td width="90" valign="top">
                    <div style="height: 20px;">
                        <p class="editable_number" id="sum2" style="text-align: right;">4</p>
                    </div>
                </td>
                <td width="250" valign="top">
                    <div...

CSS

.editable_number input { width: 40px;}

JavaScript

function tally(selector) {
    var total = 0;
    $('p.editable_number').each(function() {
        total += parseInt($(this).text()) || 0;
        $('#subtotal').html(total);
        if($("#iva").is(':checked')){
            $('#subtotal').html((total).toFixed(2));
            $('#total').html((total*0.00).toFixed(2));
            $('#total1').html((total*0.15).toFixed(2));
            $('#total2').html((total*0.85).toFixed(2));
        }
        else {
            $('#subtotal').html((total).toFixed(2));
            $('#total').html((total*0.21).toFixed(2));
            $('#total1').html((total*0.15).toFixed(2));
            $('#total2').html((total*1.06).toFixed(2));
        }
         if($("#irpef").is(':checked')){
            $('#subtotal').html((total).toFixed(2));
            $('#total').html((total*0.21).toFixed(2));
            $('#total1').html((total*0.00).toFixed(2));
            $('#total2').html((total*1.21).toFixed(2));
        }
        else {
            $('#subtotal').html((total).toFixed(2))
            $('#total').html((total*0.21).toFixed(2));
            $('#total1').html((total*0.15).toFixed(2));
            $('#total2').html((total*1.06).toFixed(2));
        }
        })
        }
        
$('#irpef').change(function() {
             tally('p#subtotal');
             tally('p#total');
             }); 
$('#iva').change(function() {
             tally('p#subtotal');
             tally('p#total');
             }); 
        

function initEditables() {
    $('.editable_number').editable(function(value, settings) {
        return (value);
    }, {
        type: 'number',
        style: "inherit",
        onblur: "submit",
        callback: function() {
            tally('p#subtotal');
            tally('p#total');
        }
    });
    $('.editable_textarea').editable(function(value, settings) {
        return (value);
    }, {
        type: 'textarea',
        width: '200',
        height: '20',
        onblur: "submit",
        style:...