JSFiddle - React, Tailwind, and code Playground

HTML

<div id="orderHolder"></div>
<div id="page" class="hfeed site">
    <header id="masthead" class="site-header" role="banner">
        <div class="w960">
            <div id="meta-top">
                <div id="call">Order Now: 0191 276 0595</div>
                <div class="social"><span>Follow us</span>
	<a href="https://twitter.com/EatFoodNation" target="_blank"><div class="tw"></div></a>
	<a href="https://www.facebook.com/thefoodnation" target="_blank"><div class="fb"></div></a>

                </div>
            </div>
            <div class="site-branding">
<a href="http://eatfoodnation.co.uk/" style="position:static;"><img id="logo" src="http://eatfoodnation.co.uk/wp-content/uploads/2013/06/food-nation-logo.png" width="282"></a>

                	<h1 class="site-title"><a href="http://eatfoodnation.co.uk/" title="Eat Food Nation" rel="home">Eat Food Nation</a></h1>

                	<h2 class="site-description"></h2>

            </div>
            <nav id="site-navigation" class="navigation-main" role="navigation">	<a href="http://foodnation.org"><img src="http://eatfoodnation.co.uk/wp-content/uploads/2013/06/food-nation-vegetable.png" width="75"></a>

                	<h1 class="menu-toggle">Menu</h1>

                <div class="screen-reader-text skip-link"><a href="#content" title="Skip to content">Skip to content</a>

                </div>
                <div class="menu-primary-container">
                    <ul id="menu-primary" class="menu">
                        <li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-140"><a href="http://eatfoodnation.co.uk/">Home</a>

                        </li>
                        <li id="menu-item-141" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-131 current_page_item menu-item-141"><a href="http://eatfoodnation.co.uk/lunchtime-menu/">Lunchtime Menu</a>

                        </li>
                    ...

CSS

.qty {
    width: 30px;
    border: 0 !important;
    margin-left: 15px;
    position: absolute;
    right: 0;
    top: 0;
    background: #a43d7a;
    color: white !important;
    font-weight: bold;
    border-radius: 0 !important;
    font-size: 15px !important;
    padding: 3px 4px !important;
}
.head {
    position: relative;
}

JavaScript

//add input fields to each price and calculate total whilst creating invisible text list of order



jQuery(document).ready(function () {
    //add order holder
    jQuery(".entry-content").prepend("<div class='orderHolder'></div>");

    //add price boxes
    jQuery(".price").each(function () {
        holder = jQuery(this).parent();
        jQuery(holder).append("<input type='text' class='qty' placeholder='Qty' title='Number Only'>");
    });


    var orderHolder = jQuery("#orderHolder");
    //on qty change get all active items and add list to div
    jQuery(".qty").keyup(function () {
        jQuery("#orderHolder").empty();
        if (jQuery(this).val() > 0) { //if qty is value
            totalCost = 0;
            jQuery(".head").each(function () {
                title = jQuery(this).find(".title").text();
                desc = jQuery(this).parent().find(".description").text();
                price = jQuery(this).find(".price").text();
                qty = jQuery(this).find(".qty").val();
                costData = Math.round(qty * price * 100) / 100;
                cost = costData.toFixed(2);
                rawCost = parseFloat(cost);
                fooditem = qty + " x " + title + " " + desc + " @ " + price + " = £" + cost;
                if (qty > 0) {
                    jQuery("#orderHolder").append("||||| " + fooditem + ". ");
                    totalCost = totalCost + rawCost;
                }
            });
            jQuery("#orderHolder").append("|||||||||| Total Cost = £" + totalCost.toFixed(2));
            jQuery("input#total").attr("value", totalCost.toFixed(2));
            jQuery("input#getIt").attr("value", totalCost.toFixed(2));
        } else { //if qty is not value
            jQuery(this).val('');
            totalCost = 0;
            jQuery(".head").each(function () {
                title = jQuery(this).find(".title").text();
                desc = jQuery(this).parent().find(".description").text();
                price...