JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment-with-locales.min.js"></script>
<div id="datepickerPart" class="datePicker hidden">
  <input class="input from" />
  <input class="input to" />
  <button class="updateButton">✎ </button>
    <button class="controlButton">√ </button>

</div>


<button id="new">✚</button>
<button id="remove">✂</button>
<div class="datePart">

</div>
<div id='jqxCalendar'></div>

CSS

.special1 {
  background-color: #bd5;
}
.special2 {
  background-color: #5db;
}
.special3 {
  background-color: #d5b;
}
.special4 {
  background-color: #DF01A5;
}
.special5 {
  background-color: #0101DF;
}
.special6 {
  background-color: #F5BCA9;
}
.special7 {
  background-color: #DF0101;
}
.special8 {
  background-color: #5F4C0B;
}
.special9 {
  background-color: #00BFFF;
}
.special10 {
  background-color: #0431B4;
}
.special11 {
  background-color: #F78181;
}
.special12 {
  background-color: #ACFA58;
}
.special13 {
  background-color: #FACC2E;
}
.special14 {
  background-color: #8258FA;
}
.special15 {
  background-color: #FE2E64;
}
.special16 {
  background-color: #01A9DB;
}
.special17 {
  background-color: #A901DB;
}
.special18 {
  background-color: #FA58AC;
}
.special19 {
  background-color: #31B404;
}
.special20 {
  background-color: #DF01D7;
}
.special21 {
  background-color: #21610B;
}
.special22 {
  background-color: #29088A;
}
.special23 {
  background-color: #8A0886;
}
.special24 {
  background-color: #B40486;
}
.special25 {
  background-color: #424242;
}
.alernative
{
  background-color:white;
}

body {
  font-family: sans-serif;
}

.hidden {
  display: none;
}

.warning {
  display: none;
}

.warning {
  position: relative;
  max-width: 320px;
  background-color: #E6E6E6;
  //height:200px;
  border: 1px solid #0B615E;
  color: #0B615E;
  text-align: center;
  margin: 0 auto;
  padding: 15px 60px 15px 15px;
  transition: opacity .5s linear;
}

.warning .text {}

.warning_hidden {
  opacity: 0;
}

.warning #closeButton {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  border-radius: 50%;
  //  border: none;
  color: #e5e5e5;
  background-color: #04B4AE;
  cursor: pointer;
}

.warning #closeButton #symbol {}

.removeButton1 {
  background-color: pink;
}
.controlButton{
  display:none;
   border:none;
  outline:none;
  background:transparent;
}
.updateButton{
  display:none;
 ...

JavaScript

$(function() {
"use strict"
	var specialNum = 1;
  var numColors = 25;
  $("#jqxCalendar").jqxCalendar({
    width: '200px',
    height: '200px',
    //theme: 'energyblue',
    selectionMode: 'range'
  }); 
  var getDates = function() {
    var outputArray = $('.datePart .datePicker').last().map(function(index) {
      var date = [];

      var start =
        $(this).find('.from').last().val(),
        end = $(this).find('.to').last().val(),
       
        between = [];

      between.push(start);
      between.push(end);


      date.push(between);
      console.log(date);
      return date;
    }).get();
    // console.log(outputArray);
    return outputArray;

  }
  var lastStepArray = function() {
    var finalArray = getDates().map(function(subArray) {
      return subArray.map(function(date) {
        return date.split('/');
      });
    });
    return finalArray;
  }
  var finishTheOperation = function() {
    var finishArray = lastStepArray()[0];
    console.log('@@', finishArray);


    var startingDate = new Date();
    startingDate.setFullYear(Number(finishArray[0][2]), (Number(finishArray[0][1]) - 1), Number(finishArray[0][0]));
    console.log("date1 " + startingDate);
    var endingDate = new Date();

    endingDate.setFullYear(Number(finishArray[1][2]), (Number(finishArray[1][1]) - 1), Number(finishArray[1][0]));
    
    console.log("date2 " + endingDate);
    
		var date = new Date(startingDate);
    date.setHours(0);
    endingDate.setHours(23);
    var cal = $("#jqxCalendar");
 
    while (date < endingDate) {
    	console.log('addSpecialDate', date, 'special' + specialNum, '')
      
    	cal.jqxCalendar('addSpecialDate', date, 'special' + specialNum, '');
      date = new Date(date);
      date.setDate(date.getDate()+1);
    }
    specialNum++;
    if (specialNum > numColors) specialNum = 1;
  }

 
 function createANewDatepickerSection() {
    var $datePart = $('.datePart'),
      $datepickerPart = $('#datepickerPart'),
      clone =...