JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<!-- begin tablerow articleTable-->
<div id="showdata"></div>
<table class="articleTable">
    <thead>
        <tr><th colspan="10">
            <input type="text" id="1" value="1" class="hiddenArticleRowNumber"/>
            <span class="articleRowTitleHeader">Titel:</span> <span class="articleRowTitle">Learning jQuery: Better Interaction Design and Web Development </span>  <span class="articleRowTitleHeader">Auteur:</span> John resig  <span class="articleRowTitleHeader">Uitgever:</span> John resig</th></tr>
    </thead>
    <tbody>
        <tr>
            <td class="articleDashedLine">
                <span class="articleRowTitletbody">Levertijd:</span>
                <span class="articleDeliveryTime">14 werkdagen</span>
            </td>
            <td class="articleDashedLine">
                <span class="articleRowTitletbody">Aantal:</span>
                <input class="articleQuantity" value="1" style="width:20px; text-align:center;" type="text" />
                <a href="#" class="articleQuantityUp">+</a>
                <a href="#" class="articleQuantityDown">-</a>  
            </td>
            <td class="articleDashedLine">
                <span class="articleRowTitletbody">BTW:</span>
                <span class="articleBTW">19%</span>                 
                <span class="articleBtwDiscription"></span>
            </td>
            <td class="articleDashedLine">
                <span class="articleRowTitletbody">Prijs:</span>
                <span id="article_1_price">56,95</span>                 
                <span class="articleBtwDiscription"> Inclusief BTW</span>
            </td>
            <td class="articleDashedLine">
                <span class="articleRowTitletbody">Totaal:</span>
                <span id="article_1_totalPrice">23423,23</span>           
                <span class="articleBtwDiscription"> Inclusief BTW</span>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr><th colspan="10"><a href="#"...

CSS

.articleTable th{line-height:18px;}
.articleTable td, .articleTable tfoot, .articleTable th {
    border-top: 1px solid #c0c0c0;
    width: 300px;
    padding: 10px 5px;
    padding-left:10px;
    vertical-align: top;
        font-weight: 500;
}

.articleTable thead input{width:20px;}
.articleTable tfoot, .articleTable thead {line-height:10px; padding:5px;}
.articleTable {
    border: 1px solid #c0c0c0;
    width:970px;
}

.articleTable tbody a {
    border: 1px solid black;
    font-weight: 600;
    padding: 3px 10px;
    text-decoration: none;
    width: 10px;
}

.articleTable .articleQuantityDown {
    height: 20px;
    margin-left: 10px;
    margin-top: 11px;
    position: absolute;
}

.articleTable .articleQuantityUp {
    height: 20px;
    margin-left: 10px;
    margin-top: -18px;
    position: absolute;
}

.articleTable .articleQuantity{ margin-left:0px; width:45px!important; font-weight:600;}
.articleTable .articleRowTitle{ color:#ff9900; font-weight: 500;}
.articleTable .articleRowTitleHeader{ font-weight:600; color:#00749c;}
.articleTable .articleRowTitletbody{  color:#00749c; margin-bottom:5px; display:block;}
.articleTable .articleBtwDiscription{line-height:15px; display:block; color:#777; font-size: 11px; font-style: italic;}
.articleTable .delbutton{float:right;}
.articleTable .articleDashedLine{border-left:1px dashed #d9d9d9;}

JavaScript

var fakeData = '{"basket":{"articles":[{"lineId":2,"price":1.1,"totalPrice":4.4},{"lineId":1,"price":2.1,"totalPrice":2.1},{"lineId":3,"price":11.1,"totalPrice":11.1},{"lineId":4,"price":52.1,"totalPrice":152.2},{"lineId":5,"price":92.1,"totalPrice":192.2}],"bookTotal":{"priceInclVat":481.55,"priceExclVat":393.43,"vat":[{"perc":6,"price":1.56},{"perc":19,"price":86.56}]}}}';

$(".delbutton").live('click', function() {
    var theClosestTable = $(this).closest('table');
    var hiddenArticleRowNumberValue = $('.hiddenArticleRowNumber',theClosestTable).val();
    var theArticleQuantity = $('.articleQuantity',theClosestTable).val();
    //console.log(theClosestTable,'theClosestTable');
    //console.log(hiddenArticleRowNumberValue,'hiddenArticleRowNumberValue');
    if (confirm("Weet je zeker dat je deze record wilt verwijderen?")) {
    $.post('test.php',{ lineId: hiddenArticleRowNumberValue}, function(data) {
        $(this).parents("table").animate({
            opacity: "hide"
        }, "slow");
        $.each(data.basket.articles, function(i, el) {
            $('#article_'+el.lineId+'_price').html(el.price);
            $('#article_'+el.lineId+'_totalPrice').html(el.totalPrice);
        });
        $('.articlePriceInclVat').html("&euro; " + data.basket.bookTotal.priceInclVat);
        $('.articlePriceExclVat').html("&euro; " + data.basket.bookTotal.priceExclVat);

        $.each(data.basket.bookTotal.vat, function(i, el) {
            var articleVat = $('.articleVat:eq(' + [i] + ')');
            console.log(el.perc);
            articleVat.find('.articleVatPerc').html("BTW " + el.perc + "%").end().find('.articleVatPrice').html("&euro; " + el.price).end();
        });
    });
    return false;
    }
});

$(".duplicatebutton").live('click', function() {
    var theClosestTable = $(this).closest('table')
    var hiddenArticleRowNumberValue = $('.hiddenArticleRowNumber',theClosestTable).val();
    //console.log(theClosestTable,'theClosestTable');
   ...