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

jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery('#subunitscontainer').on('click', jQuery(this), function(event){
        
    //non delegated one. singel click no problem but dynamically generated dom does not response to the event here.
    //jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}
//end single and double clicks

//apply single and double clicks   
    $("p.days").single_double_click(function () {
  	  alert("single clicked")}, function (event) {
		  f(event);
	})
	
    $("p.months").single_double_click(function () {
  	  alert("single clicked")}, function (event) {
		  f(event);
	})
//end apply single and double clicks   
    
	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",
		}

		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 add_news = document.createTextNode(i);
					newPara.appendChild( add_news );
				
					newPara.setAttribute("class", "days");
					newPara.setAttribute("id", i);

document.getElementById("dayscontainer").appendChild(newPara);
				}			
		}
	
	function f(event)
	{
		
		if...