JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

<table id="quote">
    <tr>
        <th>Sign type</th>
        <th>Size</th>
        <th>Qty</th>
        <th>Unit price</th>
        <th>Subtotal</th>
        <th>Cancel</th>
    </tr>
    <tr class="checkoutOptions">
        <td>
            <input class="finalSign" type="hidden" value="123" />Sign name</td>
        <td>40 X 40</td>
        <td>
            <input maxlength="2" class="finalQty" value="5" />
        </td>
        <td class="unitFocus">
            <input class="finalUnitPrice" type="hidden" value="50" />$50</td>
        <td class="subtotal">'+$XX</td>
        <td></td>
    </tr>
    <tr class="checkoutOptions">
        <td>
            <input class="finalSign" type="hidden" value="123" />Sign name</td>
        <td>40 X 40</td>
        <td>
            <input maxlength="2" class="finalQty" value="5" />
        </td>
        <td class="unitFocus">
            <input class="finalUnitPrice" type="hidden" value="50" />$50</td>
        <td class="subtotal">'+$XX</td>
        <td></td>
    </tr>
    <tr class="checkoutOptions">
        <td>
            <input class="finalSign" type="hidden" value="123" />Sign name</td>
        <td>40 X 40</td>
        <td>
            <input maxlength="2" class="finalQty" value="5" />
        </td>
        <td class="unitFocus">
            <input class="finalUnitPrice" type="hidden" value="50" />$50</td>
        <td class="subtotal">'+$XX</td>
        <td></td>
    </tr>
    <tr class="deliveryCost">
        <td><span class="italic">Delivery cost for all items</span>

        </td>
        <td></td>
        <td></td>
        <td></td>
        <td class="subtotal">S$0</td>
        <td></td>
    </tr>
    <tr id="total">
        <td>Grand total:</td>
        <td colspan="4">
            <input id="pprice" type="hidden" name="amount" maxlength="5" value="" />S$0</td>
        <td>
            <input id="buy_now" type="image" src="" name="submit" alt="PayPal . The safer, easier way to pay online." onclick="" />
       ...

JavaScript

function paypalPasser() {

        var $table = $('#quote');
        var fields = {
            name: {
                field: $table.find('.finalSign'),
                prefix: 'item_name_'
            },
            size: {
                field: $table.find('.finalSize'),
                prefix: 'on'
            },
            quantity: {
                field: $table.find('.finalQty'),
                prefix: 'quantity_'
            },
            amount: {
                field: $table.find('.finalUnitPrice'),
                prefix: 'amount_'
            }
        };

        for (var prop in fields) {
            if (fields.hasOwnProperty(prop)) {

                var $item = fields[prop];
                $item.field.each(function (k, v) {
                    $(v).attr('name', $item.prefix + k);
                });

            }
        }

        var $row = $table.find('.checkoutOptions');
        $row.each(function (k, v) {
            var $quantity = $(fields.quantity.field.get(k)),
                $price = $(fields.amount.field.get(k)),
                $subtotal = $(v).find('.subtotal');
            
            function setSubtotal() {  
                $subtotal.text('$ ' + (quantity.val() * $price.val())); 
            }
            setSubtotal();
            $quantity.change(function(e) {
                setSubtotal();
            });
        });

    }

    paypalPasser();