JSFiddle - React, Tailwind, and code Playground

by protron

HTML

<script src="http://eurothermwindows.com/ed/js/libs/modernizr-1.7.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<div id="contact-form" class="clearfix">
 <h1>New Additions</h1>
 <h2>Fill out the contact form below to get in touch with us.</h2>
 <ul id="errors" class="">
   <li id="info">There were some problems with your form submission:</li>
 </ul>
 <p id="success" class="">Thanks for your message! We will get back to you as soon as possible.</p>
 <form method="post" id="multi" action="/echo/html/">

    <label for="cname">Company Name: <span class="required">*</span></label>
    <input type="text" size="30px" id="cname" name="cname" value="" placeholder="Company Name" required autofocus />

    <label for="name">Contact Name: <span class="required">*</span></label>
    <input type="text" size="30px"id="pname" name="pname" value="" placeholder="John Doe"   />

    <label for="email">Email Address: <span class="required">*</span></label>
    <input type="email" size="30px" id="email" name="email" value="" placeholder="johndoe@example.com" required />

    <label for="telephone">Telephone: </label>
            
    <input size="9px" placeholder="1112223333" autofocus maxlength="9" type="tel" id="telephone" name="telephone" value="" />         
    <hr>      
    <div id='specialtext'>Specify the special daily deals occuring at your place. You are not required to have a special every day of the week.</div>
    <div>
    
        <table>
            <tr>
                <td><label>Special Day: <span class="required">*</span></label></td>
                <td><label>Special Name: <span class="required">*</span></label></td>
                <td><label>Original Price: <span class="required">*</span></label></td>
                <td><label >Special Price: <span class="required">*</span></label></td>
            </tr>
            <tr>
                <td>
                    <select id="days">
                   ...

CSS

/* ==== Scroll down to find where to put your styles :) ==== */

/*  HTML5 âś° Boilerplate  */

html, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { width:600px; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }


select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }

sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align:...

JavaScript

$(function() {
    var ctr = 0;
    var dailyDeals = [];
    $("#add").click(function() {
        var name = $("#name").val();
        var origprice = $("#origprice").val();
        var specprice = $("#specprice").val();
        var dmenu = document.getElementById("days");
        var dmenuvalue = dmenu.options[dmenu.selectedIndex].text;
        var regex = /^\d+(?:\.\d{0,2})$/;
        if (dmenuvalue != "temp" && name.indexOf("%") == -1 && (origprice.indexOf("%") == -1 && regex.test(origprice)) && (specprice.indexOf("%") == -1 && regex.test(specprice))) {

            var $tr = $('<tr>').css({
                'padding': '4px',
                'background-color': '#ddd'
            }).appendTo('#tableDailyDeals');

            var dailyDeal = [
                dmenuvalue,
                name,
                origprice,
                specprice
            ];
            dailyDeals.push(dailyDeal);

            for (i = 0; i < 4; i++) {
                var $td = $('<td>').appendTo($tr);
                $('<span>').text(dailyDeal[i]).appendTo($td);
                $('<input type="hidden">').attr({
                    'name': 'name[' + ctr + '][' + i + ']',
                    'value': dailyDeal[i]
                }).appendTo($td);
            }

            var $tdRemoveRow = $('<td>').appendTo($tr);
            $('<a>').attr({
                'href': '#'
            }).text("X").click(function() {
                $tr.remove();
                return false;
            }).appendTo($tdRemoveRow);

            ctr++;
            
            $("#dailydeals").text('');
            return false;
        } else {
            $("#dailydeals").text('*Please complete all required fields above.');
            return false;
        }
    });

    // only to test submitted data inside jsfiddle
    $("form").submit(function() {
        var mapper = function(o) {
            var n = {};
            n[o.name] = o.value;
            return n;
        };
       ...