JSFiddle - React, Tailwind, and code Playground

HTML

<div id="feedback"><form name="feedbackform" id="feedbackform" action="feedback-accept.php" onSubmit="javascript: validate(); return false;" method="post">
    <div id="feedback-top">
        <div id="feedback-header">Send Us Your Feedback</div>
        <div id="feeback-top-subrow"><div id="feedback-customer-service">Need Help? Contact <a href="#">Customer Service</a>.</div><div id="feedback-header-sub">We'd love to hear your thoughts.</div></div>
    </div>
    <div id="feedback-divider"></div>
    <div id="feedback-bottom">
        <div class="feedback-subtitle">How do you feel about this site? <span class="feedback-sub">(optional)</span></div>
            <div id="feeback-satisfied-bar">
                    <label><div class="feeback-satisfied-bar-odd">1<br /><input type="radio" name="satisfaction" id="satisfaction" value="1" /></div></label>
                    <label><div class="feeback-satisfied-bar-even">2<br /><input type="radio" name="satisfaction" id="satisfaction" value="2" /></div></label>
                    <label><div class="feeback-satisfied-bar-odd">3<br /><input type="radio" name="satisfaction" id="satisfaction" value="3" /></div></label>
                    <label><div class="feeback-satisfied-bar-even">4<br /><input type="radio" name="satisfaction" id="satisfaction" value="4" /></div></label>
                    <label><div class="feeback-satisfied-bar-odd">5<br /><input type="radio" name="satisfaction" id="satisfaction" value="5" /></div></label>
                    <label><div class="feeback-satisfied-bar-even">6<br /><input type="radio" name="satisfaction" id="satisfaction" value="6" /></div></label>
                    <label><div class="feeback-satisfied-bar-odd">7<br /><input type="radio" name="satisfaction" id="satisfaction" value="7" /></div></label>
                    <label><div class="feeback-satisfied-bar-even">8<br /><input type="radio" name="satisfaction" id="satisfaction" value="8" /></div></label>
                   ...

JavaScript

$(function(){
    $(".img-swap").live('click', function() {
        this.src = this.src.replace('_off', '_on');
            var topic = $(this).parent().attr('href');
            htopic.value = topic.substr(1);
            $('.img-swap').not(this).attr('src', function(index, attr) {
            return attr.replace('_on', '_off');
        });
    });
});
// Empties email input field onFocus
function clickclear(thisfield, defaulttext) {
    if (thisfield.value == defaulttext) {
        thisfield.value = "";
    }
}
// Refill email input field onBlur
function clickrecall(thisfield, defaulttext) {
    if (thisfield.value == "") {
        thisfield.value = defaulttext;
    }
}
// Submit form to next page
function submitForm() {
 //   document.forms["feedbackform"].submit();
     document.feedbackform.submit();
}
// Submit form and validate email using RFC 2822 standard
function validateEmail(email) { 
    // Modified version original from: http://stackoverflow.com/a/46181/11236
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
// Return true if email field is left unchanged
function originalText(email){
    var defaultMsg;
    defaultMsg = "Enter your email address (optional)";
    if(defaultMsg == email){
        return true;    
    }
    return false;
}
// Verify or decline with error message
function validate(){
    $("#result").text("");
    var email = $("#email").val();
    if ((validateEmail(email)) || originalText(email)) {
        w.value = screen.width;
        h.value = screen.height;
        submitForm();
    } else {
        $("#result").text(email + " is not a valid email.");
        $("#result").css("color", "red");
      }
      return false;
}
$("form").bind("submit", validate);