JSFiddle - React, Tailwind, and code Playground

by Manna

HTML

<script src="http://tommywebdesigner.com/jeditable/js/jquery.jeditable.js"></script>
<table style="display:none" id="temprow">
            <tr>
                <td width="450" valign="top">
                    <div style="height: 15px;">
                        <p class="editable_textarea"></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;"></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>
                <td width="450" valign="top">
                    <div style="height: 15px;">
                        <p class="editable_textarea"></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;"></p>
                    </div>
                </td>
                <td width="250" valign="top">
                    <input type="button" name="add" value="+" class="tr_clone_add">
                    <input type="button" name="less" value="-"...

JavaScript

$('input.tr_clone_add').live('click',function(){
    var temprow = $('#temprow tbody').html();
    var tr = $(this).closest('tr');
    tr.after(temprow); 
    initEditables();
    tally('p#subtotal');
    tally('p#total');
});

$("input.tr_clone_remove").live("click", function() {
$(this).closest('tr').remove();
    initEditables();
    tally('p#subtotal');
    tally('p#total');
});

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


function tally(selector) {
    var total = 0;
    $('p.editable_number').each(function() {
        total += parseInt($(this).text()) || 0; 
        $('#subtotal').html(total)
        $('#total').html(total*0.21);
        $('#total2').html(total*0.15);
        $('#total3').html(total*1.06); 
    })
}

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.find(':text').val('');
    $clone.attr('id', 'sum' + lastid)
    $tr.after($clone);
    initEditables();
    tally('p#subtotal');
    tally('p#total');
});
*/