JSFiddle - React, Tailwind, and code Playground

by Luke

HTML

<div id="subunitscontainer">
		<div id="monthscontainer">
			<p class="months" id="Dec">Dec</p>
			<p class="months" id="Nov">Nov</p>
			<p class="months" id="Oct">Oct</p>
			<p class="months" id="Sep">Sep</p>
			<p class="months" id="Aug">Aug</p>
			<p class="months" id="Jul">Jul</p>
			<p class="months" id="Jun">Jun</p>
			<p class="months" id="May">May</p>
			<p class="months" id="Apr">Apr</p>
			<p class="months" id="Mar">Mar</p>
			<p class="months" id="Feb">Feb</p>
		</div>
		
		<div id="dayscontainer">
			<p class="days" id="31">31</p>
			<p class="days" id="30">30</p>
			<p class="days" id="29">29</p>
			<p class="days" id="28">28</p>
			<p class="days" id="27">27</p>
			<p class="days" id="26">26</p>
			<p class="days" id="26">25</p>
			<p class="days" id="26">24</p>
			<p class="days" id="26">23</p>
			<p class="days" id="26">22</p>
			<p class="days" id="26">21</p>
			<p class="days" id="26">20</p>
			<p class="days" id="26">19</p>
			<p class="days" id="26">18</p>
			<p class="days" id="26">17</p>
			<p class="days" id="26">16</p>
			<p class="days" id="26">15</p>
			<p class="days" id="26">14</p>
			<p class="days" id="26">13</p>
			<p class="days" id="26">12</p>
			<p class="days" id="26">11</p>
			<p class="days" id="26">10</p>
			<p class="days" id="26">9</p>
			<p class="days" id="26">8</p>
			<p class="days" id="26">7</p>
			<p class="days" id="26">6</p>
			<p class="days" id="26">5</p>
			<p class="days" id="26">4</p>
			<p class="days" id="26">3</p>
			<p class="days" id="26">2</p>
		</div>
		

	</div>

CSS

div#monthscontainer
	{
		display: none;
	}
	div#dayscontainer
	{
		display: block;
	}
	</style>

JavaScript

//single and double clicks

var DELAY = 300, clicks = 0, timer = null;

$(function(){

    $("#subunitscontainer").on("click", "p", function(e){

        clicks++;  //count clicks

        if(clicks === 1) {

            timer = setTimeout(function() {

                alert("Single Click");  //perform single-click action    
                clicks = 0;             //after action performed, reset counter

            }, DELAY);

        } else {

            clearTimeout(timer);    //prevent single-click action
            //alert("Double Click");  //perform double-click action

            clicks = 0;             //after action performed, reset counter
        }

    })
    .on("dblclick", function(e){
        e.preventDefault();  //cancel system double-click event
                    f(event);
    });

});
    
	var months_lengths = 
	 	{
	    Dec: 31,
	    Nov: 30,
		Oct: 31,
		Sep: 30,
		Aug: 31,
		Jul: 31,
		Jun: 30,
		May: 31,
		Apr: 30,
		Mar: 31,
		Feb: 28,
		Jan: 31,
		};

		var order_months =
		{
			1: "Jan",
			2: "Feb",
			3: "Mar",
			4: "Apr",
			5: "May",
			6: "Jun",
			7: "Jul",
			8: "Aug",
			9: "Sep",
			10:"Oct",
			11:"Nov",
			12:"Dec",
		}

        //generates days numbers.
		function g(event)
		{
				monthName = event.target.id;
				var monthLength = months_lengths[monthName];
				document.getElementById("dayscontainer").innerHTML= null;
			
				for (i=monthLength; i>0; i--)
				{
					var newPara = document.createElement("p");
					var daynumber = document.createTextNode(i);
					newPara.appendChild( daynumber );
				
					newPara.setAttribute("class", "days");
					newPara.setAttribute("id", i);
			document.getElementById("dayscontainer").appendChild(newPara);
				}
        }
	
//make changes of units on vertical scale
	function f(event)
	{
		
		if ( event.target.className == "months")
		{	
			//set inner html of demanded element.
			var monthscontainer = document.getElementById("monthscontainer").innerHTML;
			var dayscontainer =...