JSFiddle - React, Tailwind, and code Playground

HTML

<body>
 <div class="form-style-10">

  <div class="inner-wrap">
	
   <form action="" method="post">
   
	<label>Dealership Name:<em class="required-star">*</em></label><input id="dealerName" name="dealerName" type="text" placeholder="Dealership Name" style="background-color: white;"/>
	
	<label>Which Marketing Medium?<em class="required-star">*</em></label><select id="market" type="select" name="marketing">
		<option id="market1" value="Facebook">Facebook</option>
		<option id="market2" value="Website Banner">Website Banner</option>
		<option id="market3" value="Radio">Radio</option>
		<option id="market4" value="TV">TV</option>
		<option id="market5" value="Email">Email</option>
		<option id="market6" value="Direct Mail">Direct Mail</option>
		<option id="market7" value="All Channels">All Channels</option>
	</select>
	
	<label>Offer Type?</label><select id="newused" type="select" name="offerType">
		<option id="option_1" value="New">New</option>
		<option id="option_2" value="Used">Used</option>
	</select>

<div id="new" style="display:none;">
	<label>Type of Purchase?</label><select id="newPick" type="select" name="typeOfPurchase">
		<option id="newPick_1" value="Purchased">Purchased</option>
		<option id="newPick_2" value="Leased">Leased</option>
	</select>
</div>
	
	<!--This div section is for when client select puchased as their new opiton....--->
	<div id="purchased" style="display:none;">
		<label>Start Date:<em class="required-star">*</em></label><input id="pur_startDate" name="startDate" type="text" placeholder="01/01/2012" style="background-color: white;"/>
		<label>End Date:<em class="required-star">*</em></label><input id="pur_endDate" name="endDate" type="text" placeholder="05/07/2015" style="background-color: white;"/>
		<label>Year:<em class="required-star">*</em></label><input id="pur_vehicleYear" name="yearOfVehicle" type="text" placeholder="Vehicle Year" style="background-color: white;"/>
		<label>Make:<em...

CSS

<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>

/*** Css file for mydealerworld.com FORM ****////

html{
	background-color: #BDC0CE;
}

body {
	
	margin: 0;
	padding: 0;
	
}

body {
	background: #ffffff;
	color: #111111;
	font-family: 'Lato', sans-serif;
	padding: 20px;
}

h2{
	color: black;
	text-align: center;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
}

.form-style-10{ /*background behind the actual form */
    width:700px;
    padding:30px;
    margin:40px auto;
    background: #3eb6ff;
    border-radius: 15px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
	
}

/* this is the grey area holding label and input items. */
.form-style-10 .inner-wrap{
	width: 98%;
    padding: 10px;
	padding-bottom: 40px;
    background: #0059b1;
    border-radius: 10px;
    margin-bottom: 20px;
	
}

/* this is for lable area (e.g. "What type of offer.") */
.form-style-10 label{ 
    display: block;
	font-family: 'Lato', sans-serif;
    font: 1.2em;
    color: black;
	margin-top: 5px;
    margin-bottom: 5px;
	
}

/* this is input area for labels (e.g. "what you selected for type of offer"). */
.form-style-10 input[type="text"],
.form-style-10 textarea,
.form-style-10 select {
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 90%;
    padding: 8px;
    border-radius: 6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border: 2px solid #fff;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
    -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}

/* This is the header if needed but, it is being removed.
.form-style-10 .section{
    font: normal 30px 'Bitter', serif;
    color:...

JavaScript

$(document).ready(function() {
$select = $('#newused');
$select = $('#newPick');
$('#newused').on('change',function(){

    if($(this).val() == "New"){
        if($('#new').is(":hidden")){
            $('#new').show();
			$('#purchased').show();
			$('#leased').show();
        }
		else{
			$('#used').hide();
			}
    }
	
    if($(this).val() == "Used"){
        if($('#used').is(":hidden")){
            $('#used').show();
        }
		else{
		   $('#new').hide();
		   $('#leased').hide(); 
		   $('#purchased').hide();
		}
	}
	  
});

$('#newPick').on('change',function(){

    if($(this).val() == "Purchased"){
        if($('#purchased').is(":hidden")){
            $('#purchased').show();
        }
		else{        
			$('#leased').hide(); 
			$('#used').hide();
		}
    }
	
	if($(this).val() == "Leased"){
        if($('#leased').is(":hidden")){
            $('#leased').show();
        }
		else{        
			$('#purchased').hide(); 
			$('#used').hide();
		}
    }

	});
	});