JSFiddle - React, Tailwind, and code Playground

by hslincoln

HTML

<!-- Versions: 
/22/=  verison with nth-child(3) 
/24/=  version with last 
/26/=  version for Order Receipt 
/27/28/29/30=  Start on basket 
/32/ Breakthrough on eq(0)
/33/ work on qty
-->
<body>
    <div class="ordertable">
        <ul class="theaddummy">
            <table cellspacing="0" cellpadding="0" class="wizrtable" title="Item information" summary="Item information">
                <thead>
                    <tr>
                        <th class="thumb" scope="col"><span>PRODUCT INFO</span>
                        </th>
                        <th class="name" scope="col"><span>Product Name</span>
                        </th>
                        <th class="priceeach" scope="col"><span>Price Each</span>
                        </th>
                        <th class="quantity" scope="col"><span>Qty</span>
                        </th>
                        <th class="totalprice" scope="col"><span>Total Price</span>
                        </th>
                        <th class="remove" scope="col"><span>Remove</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <input type="hidden" value="b13ao601000c0001" name="oiord">
                    <input type="hidden" value="" name="deleteline-id-16e9a05d53297955">
                    <!-- if product is not gift certificate -->
                    <tr class="standarditem">
                        <td class="thumb"><a href="http://jmldirect.uat.venda.com/uk/personal-accessories/belvia-bra-4-pack-classics/invt/b13ao60100000001"><img alt="Belvia Bra 4 Pack Classics" name="xsmall" src="http://jmldirect.uat.venda.com/content/ebiz/shop/invt/b13ao60100000001/rt_belvia4pack_xs.jpg"></a>
                        </td>
                        <td class="name"><a href="http://jmldirect.uat.venda.com/uk/personal-accessories/belvia-bra-4-pack-classics/invt/b13ao60100000001">Belvia Bra 4 Pack Classics</a> (Large)
<span...

JavaScript

var firstprice = $('#checkout .orderitems table.wizrtable tbody tr td.priceeach').text().replace(/\u00A3/g, '');
//price of a single product in checkout

var amountofproducts = $('#checkout .wizrtable tbody tr').length;
//amount of table rows in the actual checkout table structure


$(document).ready(function () {
    // Define unit price
    var BSKfirstrow = $('table.wizrtable tbody').children('tr.standarditem:eq(0)');
    var BSKfirstprice = $(BSKfirstrow).find('td.priceeach').text().replace(/\u00A3/g, '');
    var BSKsecondrow = $('table.wizrtable tbody').children('tr.standarditem:eq(1)');
    var BSKsecondprice = $(BSKsecondrow).find('td.priceeach').text().replace(/\u00A3/g, '');
    var BSKthirdrow = $('table.wizrtable tbody').children('tr.standarditem:eq(2)');
    var BSKthirdprice = $(BSKthirdrow).find('td.priceeach').text().replace(/\u00A3/g, '');
    // END: Define unit price

    // Define 'item IDs' (SKUs) for each product
    var BSKfirstSKU = $(BSKfirstrow).find('.sku').text().replace("Product Code:", "");
    var BSKsecondSKU = $(BSKsecondrow).find('.sku').text().replace("Product Code:", "");
    var BSKthirdSKU = $(BSKthirdrow).find('.sku').text().replace("Product Code:", "");
    // END: Define item IDs for each product

    // Define item quantities
    var BSKfirstQTY = $(BSKfirstrow).find('td.quantity').text('input value');
    var BSKsecondQTY = $(BSKsecondrow).find('.quantity').text();
    var BSKthirdQTY = $(BSKthirdrow).find('.quantity').text();
    // END: Define item IDs for each product


    // Inject html div with result

    // 1
    $(".BSKFirstprodprice").text(BSKfirstprice);
    $(".BSKFirstSKU").text(BSKfirstSKU);
    $(".BSKFirstQTY").text(BSKfirstQTY);
    // 2
    $(".BSKSecondprodprice").text(BSKsecondprice);
    $(".BSKSecondSKU").text(BSKsecondSKU);
    $(".BSKSecondQTY").text(BSKsecondQTY);
    // 3
    $(".BSKThirdprodprice").text(BSKthirdprice);
    $(".BSKThirdSKU").text(BSKthirdSKU);
   ...