JSFiddle - React, Tailwind, and code Playground

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 += parseFloat($(this).text());
    }); 
    
    $('#subtotal').html(total.toFixed(2));
    var vat = parseFloat((0.21 * total).toFixed(2));  
    var irpf = parseFloat((0.15 * total).toFixed(2));
  
    if($("#iva").is(':checked'))
    {
        $('#total').html(vat);
        total += vat;
    }    
    else
        $('#total').html('0.00');
    
    if($("#irpef").is(':checked'))
    {
        $('#total1').html(irpf);
        total -= irpf;
    }
    else
        $('#total1').html('0.00');
    
    $("#total2").html(total.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: "inherit"
    });
}

$("input.tr_clone_add").live('click', function() {
    var lastid = $('[id^="sum"]').length + 1;
    var $tr = $(this).closest('.tr_clone');
    var $clone = $tr.clone();
    $clone.attr('id', 'sum' + lastid)
    $clone.find(':text').val('');
    $tr.after($clone);
    initEditables();
    tally('p#subtotal');
    tally('p#total');
});

$(".tr_clone_remove").live("click", function() {
$(".tr_clone").last().remove();
    initEditables();
    tally('p#subtotal');
    tally('p#total');
});

initEditables();
tally('p#subtotal');
tally('p#total');