JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://tommywebdesigner.com/jeditable/jquery.jeditable.js"></script>
<script src="http://tommywebdesigner.com/bootstrap/js/jquery.js"></script>
<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"...

CSS

.editable_number input { width: 40px;}

JavaScript

$('.editable_selectiva').editable(function(value, settings) { 
             console.log(this);
             console.log(value);
             console.log(settings);
             return(value);
          }, {
               data   : "{'IVA 21%':'IVA 21%','NO IVA':'NO IVA'}", 
             type    : 'select',
             style  : "inherit",
         });



function tally(selector) {
    var total = 0;
    $('p.editable_number').each(function() {
        total += parseInt($(this).text()) || 0;
        $('#subtotal').html(total);
        alert($('.editable_selectiva').text());
        if ($('.editable_selectiva').text() === "NO IVA") {
            $('#total').html(0);
            $('#total1').html(total);
        }
        else {
            $('#total').html(total*0.21);
            $('#total1').html(total*1.21);
        }
    })
}



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');