JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div id="dialog" title="Basic dialog">
    <form id="AdresToevoegenDialog">
        <table class="contentTabsTables">
            <tbody>
                <tr>
                    <td class="contentTabsTablesDiscription">Bedrijf</td>
                    <td class=" required" style="display: table-cell; background: url(&quot;images/required.png&quot;) no-repeat scroll 0% 0% rgb(255, 255, 255);">
                        <span class="validateMe">
                            <input value="" class="bedrijf" name="contactbedrijf" style="">
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="contentTabsTablesDiscription">Afdeling</td>
                    <td  style="display: table-cell;"><input value="" class="afdeling" style=""></td>
                </tr>
                <tr>
                    <td class="contentTabsTablesDiscription">Aanhef</td>
                    <td class="required" style="display: table-cell; background: url(&quot;images/required.png&quot;) no-repeat scroll 0% 0% rgb(255, 255, 255);">
                        <span class="validateMe">
                            <input type="radio" value="dhr" name="contactaanhef" style="display: inline;"><span style="display: inline;">dhr.</span>
                            <input type="radio" value="mw" name="contactaanhef" style="display: inline;"><span style="display: inline;">mw.</span>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="contentTabsTablesDiscription">Voorletter(s)</td>
                    <td class="required" style="display: table-cell;...

CSS

fieldset{border:1px solid gray; padding:5px; width:250px;}
fieldset input{margin:3px;}
fieldset label{display:inline-block; width:80px;}
fieldset input.okebutton{float:right; margin-right:10px;}
legend {border:1px solid gray; padding:3px; background:gold;}
#dialog {display:none;}

*{font-size:10pt!important;}

/*
* jQuery UI CSS Framework 1.8.12
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Theming/API
*/

/* Layout helpers
----------------------------------*/

.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
* jQuery UI CSS Framework 1.8.12
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Theming/API
*
* To...

JavaScript

var fakeData = '{"basket": {"articles": [{"lineId": 2,"deliveryAddressId": 1,"price": 1.1,"totalPrice": 4.4},{"lineId": 1,"deliveryAddressId": 2,"price": 2.1,"totalPrice": 2.1},{"lineId": 3,"deliveryAddressId": 1,"price": 11.1,"totalPrice": 11.1},{"lineId": 4,"deliveryAddressId": 2,"price": 52.1,"totalPrice": 152.2},{"lineId": 5,"deliveryAddressId": 4,"price": 92.1,"totalPrice": 192.2}],"deliveryAdresses": [{"id": 1,"label": "1 ANWB, HR, dhr P.Petersen, Badhuisweg 97, 7314 EC Amsterdam"},{"id": 2,"label": "2 Coca Cola, IT, mw J.Jansen, 20002, 2500 EA Den Haag"},{"id": 3,"label": "3 ING, HR, dhr P.Petersen, Badhuisweg 97, 7314 EC Amsterdam"},{"id": 4,"label": "4 Rabobank, IT, mw J.Jansen, 20002, 2500 EA Den Haag"}],"bookTotal": {"priceInclVat": 481.55,"priceExclVat": 393.43,"vat": [{"perc": 6,"price": 1.56},{"perc": 19,"price": 86.56}]}}}';


var timer;
var processUpdatedBasketData = function(data) {
    $.each(data.basket.articles, function(i, el) {
        $('#article_' + el.lineId + '_priceInclVAT').html(el.priceInclVAT);
        $('#article_' + el.lineId + '_customerPriceInclVAT').html(el.customerPriceInclVAT);
        $('#article_' + el.lineId + '_totalPriceInclVAT').html(el.totalPriceInclVAT);
    });
    $('.articlePriceInclVAT').html(data.basket.bookTotal.priceInclVAT);
    $('.articlePriceExclVAT').html(data.basket.bookTotal.priceExclVAT);
    $('.basketTotalPriceInclVAT').html(data.basket.bookTotal.priceInclVAT);
    $('.basketTotalQuantity').html(data.basket.bookTotal.quantity);


    $.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(el.price).end();
    });

    $('.changeBezorgAdres optgroup:first option').remove();
    $.each(data.basket.deliveryAdresses, function(i, el) {
        var $this = $(this);
        $('.changeBezorgAdres...