JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content"></div>
CSS
#tabmenu {
color: #000;
border-bottom: 1px solid black;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }
#tabmenu li {
display: inline;
overflow: hidden;
list-style-type: none; }
#tabmenu a, a.active {
color: #aaaaaa;
background: #295229;
font: normal 1em verdana, Arial, sans-serif;
border: 1px solid black;
padding: 2px 5px 0px 5px;
margin: 0px;
text-decoration: none;
cursor:hand; }
#tabmenu a.active {
background: #ffffff;
border-bottom: 3px solid #ffffff; }
#tabmenu a:hover {
color: #fff;
background: #ADC09F; }
#tabmenu a:visited {
color: #E8E9BE; }
#tabmenu a.active:hover {
background: #ffffff;
color: #DEDECF; }
#page {font: 0.9em/1.3em verdana, sans-serif;
text-align: justify;
background: #ffffff;
padding: 20px;
border: 1px solid black;
border-top: none;
z-index: 2; }
#page a {
text-decoration: none;
color: #E8E9BE; }
#page a:hover { background: #aaaaaa; }
JavaScript
(function ($) {
$(document).ready(function () {
$('input[id^=\'opt\']').each(function () {
var sLabel = $(this).parent().parent().find("label").html();
if (sLabel != 'Special Requests') {
$(this).parent().parent().find("label").append(":<span style='color:red'>*</span>");
}
});
$('input[id^=\'opt\']').each(function () {
$(this).blur(function () {
if (this.value != '') {
$('.GSEmailValid').remove();
$(this).css({
"border": "",
"background": ""
});
}
});
});
$('#addtocartbutton').click(function () {
alert("in click");
var email1 = '';
var email2 = '';
var canGoToCart = true;
// add logic for each required field as desired
$('input[id^=\'opt\']').each(function () {
var sLabel = $(this).parent().parent().find("label").html();
// alert($(this).parent().parent().find("label").html());
//alert(sLabel);
if (sLabel.match(/^Email Address/))
{
email1 = $.trim($(this).val());
}
if (sLabel.match(/^Confirm Email Address/))
{
email2 = $.trim($(this).val());
}
if (sLabel != 'Special Requests') {
// checks each textbox for a value
if ($.trim($(this).val()) == '') {
// prevents...