JSFiddle - React, Tailwind, and code Playground

by Chris Ames

HTML

<div class="form">

                    <form id="f_contact" name="f_contact" method="post" action="thanks.php">
                    
                        <h3>Your barrel contains the following biscuits...</h3>

                        <div class="clearfix"><div class="barrel clearfix"><span class="empty">Barrel empty</span></div></div>

                        <div class="request">

                            <p>Please add your special order of biscuits in the box below...</p>
                            <textarea name="request" cols=40 rows=6></textarea>

                        </div>
                        
                        <input type="hidden" id="name" name="name" value="<? echo $name; ?>" />
                        <input type="hidden" id="barrel" name="barrel" value="" />
                        <input type="submit" id="submit" name="submit" value="Place Order" class="button clearfix" />

                    </form>

                </div>

                <ul class="cbp-rfgrid biscuits clearfix">

                    <li><button type="button" data-biscuit="custardcream" class="biscuit custardcream">Custard Creams</button></li>
                    <li><button type="button" data-biscuit="bourbon" class="biscuit bourbon">Bourbon</button></li>     
                    <li><button type="button" data-biscuit="nice" class="biscuit nice">Nice</button></li>   
                    <li><button type="button" data-biscuit="jammydodger" class="biscuit jammydodger">Jammy Dodger</button></li> 
                    <li><button type="button" data-biscuit="cookie" class="biscuit cookie">Cookie</button></li> 
                    <li><button type="button" data-biscuit="chocolatedigestive" class="biscuit chocolatedigestive">Chocolate Digestive</button></li> 
                    <li><button type="button" data-biscuit="digestive" class="biscuit digestive">Digestive</button></li> 
                    <li><button type="button" data-biscuit="fruitshortcake"...

CSS

/* General Blueprint Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
	font-family: 'bpicons';
	src:url('../fonts/bpicons/bpicons.eot');
	src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/bpicons/bpicons.woff') format('woff'),
		url('../fonts/bpicons/bpicons.ttf') format('truetype'),
		url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');
	font-weight: normal;
	font-style: normal;
} /* Made with http://icomoon.io/ */

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #565358;
}

a {
	color: #6C54AB;
	text-decoration: none;
}

a:hover {
	color: #000;
}

input[type=submit] {
	padding:1em 2em!important;
	background:#333;
	color:#fff;
	font-size:1em;
	border:none;
	outline:none;
	cursor:pointer;
}

@media screen and (min-width: 480px) {

	input[type=submit] {
		padding:1em 2em!important;
		background:#333;
		color:#fff;
		font-size:1.3em;
		border:none;
		outline:none;
		cursor:pointer;
	}


}


/* Header 
....................................................................
*/

header > .logo {
	max-width: 130px;
	margin:0 auto;
}
header > .logo a {
	display: block;
}
header > .logo a img {
	width: 100%;
}

@media screen and (min-width: 1024px) {
	header > .logo {
		max-width: 200px;
		float:left;
	}
}

.hand {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	display:block;
	max-width:25%;

}
.hand img {
	width:100%;
}
@media screen and (min-width: 760px) {
	.hand {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		display:block;
		max-width:30%;
	}
}

/* Content...

JavaScript

/*

Biscuit Slector v1.0

*/


$(function() { //Add classes to elements

	$('.biscuit').click(function(){
		$(this).toggleClass( "selected"); //Show biscuit as selected
	});

    $('.biscuit.request').click(function(){
        $('.form .request').toggleClass( "show"); //Toggle show and hide special request form when request buscuit is clicked
    });
    
    $(".barrel").on("click", ".chosen", function() {
        var biscuitName = $(this).data("biscuitname");
        
        var indexOfItem = barrel_items.indexOf(biscuitName);
        barrel_items.splice(indexOfItem,1);
        $(this).remove();
        $(".biscuits [data-biscuit='" + biscuitName + "']").removeClass("selected");
    });

});

var barrel_items = []; //Array of biscuits in barrel
var barrel = barrel_items; //Set barrel to equal the contents of the array

$('[data-biscuit]').click(function(){
    var biscuit = $(this).data('biscuit'); // Set Biscuit variable to equal that of biscuit button clicked
    add_to_barrel(biscuit); //Call function that adds biscuit to barrel array
    $("#barrel").val(barrel); //Add biscuit to barrel hidden input
});


function add_to_barrel(item){ //Adds biscuit to barrel
        
    var name = '';
    switch(item){
        case 'custardcream':
            name = 'Custard Creams';
            break;
        case 'jammydodger':
            name = 'Jammy Dodgers';
            break;
        case 'bourbon':
            name = 'Bourbons';
            break;
        case 'nice':
            name = 'Nice';
            break;
        case 'chocolatedigestive':
            name = 'Chocolate Digestives';
            break;
        case 'digestive':
            name = 'Digestives';
            break;
        case 'fruitshortcake':
            name = 'Fruit Shortcakes';
            break;
        case 'gingernut':
            name = 'Gingernuts';
            break;
        case 'oreo':
            name = 'Oreo';
            break;
        case 'hobnob':
            name =...