JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<input class="hello" type="button" value="click">
<div id="showData"></div>
<table class="articleBookTotal" style="float:right;">
    <tbody>
        <tr>
            <td class="btwDevider vet">Totaal boeken incl. BTW</td>
            <td class="articlePriceInclVat btwDevider lijnuitRechts zwart vet"></td>
        </tr>
        <tr class="articleVat">
            <td>Totaal boeken ex. BTW</td>
            <td class="articlePriceExclVat lijnuitRechts zwart"></td>
        </tr>
        <!--
        <tr class="articleVat">
            <td class="articleVatPerc"></td>
            <td class="articleVatPrice lijnuitRechts zwart"></td>
        </tr>
        <tr class="articleVat">
            <td class="articleVatPerc"></td>
            <td class="articleVatPrice lijnuitRechts zwart"></td>
        </tr>
        -->
    </tbody>

JavaScript

var fakeData = '{"basket":{"articles":[{"lineId":1,"price":1.1,"totalPrice":4.4},{"lineId":2,"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}]}}}';

var timer; //timeout for the json call
$('.hello').click(function(element) {
    console.log('sdsa');
 clearTimeout(timer); //clearing timer
    timer = setTimeout(function() { //exectuting it
        $("#showData").html("Loading...");
        $.post('/echo/json/', {
            json: fakeData
        }, function(data) {
            console.log(data);
            //        console.log(data.post_response,'post_response');
            if (data.error) {
                // do something with the error it will be data.error
            } else {                
                $('.articlePriceInclVat').html(data.basket.bookTotal.priceInclVat);
                $('.articlePriceExclVat').html(data.basket.bookTotal.priceExclVat);

                $.each(data.basket.bookTotal.vat, function(i, el) {
                    console.log(el.perc)
                 $('<tr><td class="articleVatPerc">' + el.perc + '</td><td class="articleVatPrice">' + el.price + '</td></tr>').insertAfter('.articleVat');
 });

            }
        }, 'json');
    }, 100);
    //json data end  
    element.preventDefault();
});