JSFiddle - React, Tailwind, and code Playground

by DanielaVaduva

HTML

<div>
	<form id="ChartsForm">
		<div id="optionsheader">
			<div id="dateoptions">
				<p>Until date: <input type="date" name="until_date" value="Until date"></p>
				<p>Since date: <input type="date" name="since_date" value="Since date"></p>
			</div>
		</div>
		<div id="selectaccount">
			<select name="accmenu" id="accmenu" style="width:300px; float:left; clear:both;">
                <option value="">Choose your page</option>
                <option value="1">Page 1</option>
                <option value="2">Page 2</option>
                <option value="3">Page 3</option>
                <option value="4">Page 4</option>
            </select>
		</div>
		<div class="insightsoptions">
			<p>Choose your insights:</p>
			<input id="newLikes" class="insightsbuttons" type="submit" name="submit" value="Daily new likes">
			<input id="unlikes" class="insightsbuttons" type="submit" name="submit" value="Daily unlikes">
		</div>
		<div class="insightsgraphs">
			<div id="dailyNewLikes" class="chartcontainer"></div>
			<div id="dailyUnlikes"></div>
		</div>
	</form>
</div>

CSS

.insightsbuttons {
	background-color: #E42217;
	display: block;
	height: 50px;
	margin-top: 5px;
	width: 150px;
}
.insightsgraphs {
	float: left;
	height: 235px;
	margin-left: 3px;
	margin-right: 3px;
	width: 470px;
}
.insightsgraphs div {
	display: none;
}
.insightsoptions {
	clear: both;
	float: left;
	width: 150px;
}
.insightsoptions p {
	display: block;
	height: 28px;
	line-height: 28px;
	margin-bottom: 12px;
	margin-top: 10px;
	text-align: center;
}
#newLikes.green {
	background-color: #347C17;
}
#unlikes.green {
	background-color: #347C17;
}

JavaScript

$(function () {
	$('#accmenu').change(function() {
		$(".insightsgraphs div").hide();
		$(".insightsoptions input").removeClass("green");
		$("#newLikes").one('click', function () {
            $("#dailyNewLikes").html('</p>Test daily new likes</p>');
			return false;
		});
		$("#unlikes").one('click', function () {
            $("#dailyUnlikes").html('</p>Test daily unlikes</p>');
			return false;
		});
	});
	$("#newLikes").on('click', function(){
		$(this).toggleClass('green');
		$('#dailyNewLikes').toggle();
		return false;
	});
	$("#unlikes").on('click', function(){
		$(this).toggleClass('green');
		$('#dailyUnlikes').toggle();
		return false;
	});
});