JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<form id="signup_form" action="/" method="post">
    <fieldset id="sampling-personal"> 
        <legend>A simple comment form with submit validation and default messages</legend>
        <p>
            <label for="cname">Name</label>
            <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
        </p>
        <p>
            <label for="cemail">E-Mail</label>
            <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
        </p>
        <p>
            <label for="curl">URL</label>
            <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
        </p>
        <p>
            <label for="ccomment">Your comment</label>
            <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
        </p>
        
        <p style="width:100%; margin:0; padding:0;">
            <input type="submit" class="cancel next" style=" float:right;" value="Next &rarr;" />
        </p>
    </fieldset>
    <fieldset id="sampling-machine"> 
        <p class="dropleft"><span class="label">Which products would you like more information on?</span>
            <select name="contact_product" id="contact_product" class="required">
                <option selected="selected" value="">Select from list</option>
                <option value="FISP">FISP</option>
                <option value="Segflow">Segflow</option>
                <option value="Other">Other (provide details below)</option>
            </select>
        </p>
        <p class="dropright"><span class="label">Do you require to take Celled or Cell Free Samples?</span>
            <select name="contact_celled" id="contact_celled" class="required">
                <option selected="selected" value="">Select from list</option>
                <option value="Celled">Celled</option>
                <option...

CSS

#support-machine, #sampling-machine, #disruption-machine{display:none;}

JavaScript

$(".next").click(function() {

    var mother = $(this).parent().parent().attr("id");
    var father = $(this).parent().parent().next("fieldset").attr("id");
    
    $("#"+mother).fadeOut('fast', function(){
        $("#"+father).fadeIn('slow');
    });        
});

$(".prev").click(function(){
    //$(this).parent().slideUp();
    var mother = $(this).parent().parent().attr("id");
    var father = $(this).parent().parent().prev("fieldset").attr("id");
    $("#"+mother).fadeOut('fast', function(){
        $("#"+father).fadeIn('slow');
    });
});


$(document).ready(function(){
    $("#signup_form").validate();
});