JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<table class="data">
    <tr>
        <td>
            <input class="id" type="text" value=""/>
            <input class="price" type="text"/>
            <input class="quantity" type="text"/>
            <input class="totalPrice" type="text"/>
        </td>
    </tr>
</table>
<hr/>
<table class="data">
    <tr>
        <td>
            <input class="id" type="text" value=""/>
            <input class="price" type="text"/>
            <input class="quantity" type="text"/>
            <input class="totalPrice" type="text"/>
        </td>
    </tr>
</table>
<hr/>

<div id="showData"></div>
<button class="updatebutton">updatebutton</button>

CSS

input{width:40px;}

JavaScript

$(function() {
    var fakeData = '{"basket": {"articles": [{"lineId": 1,"price": 1.1,"quantity": 4,"totalPrice": 4.4},{"lineId": 2,"price": 2.1,"quantity": 2,"totalPrice": 2.2}]}}';

    $('.updatebutton').live("click", function() {
        $("#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 {
                $.each(data.basket.articles, function(i, el) {
                    var table = $('.data:eq(' + i +')');
                     table
                     .find('.id').val(el.lineId).end()
                     .find('.price').val(el.price).end()
                     .find('.quantity').val(el.quantity).end()
                     .find('.totalPrice').val(el.totalPrice).end();
                });

            }
        }, 'json');
    });
});