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>

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

</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'
  });

  function closeTheDiv() {
    $('.warning').hide();
  }
  var situtation = function() {
    var pickerCount = $('.datePart .datePicker');

    var lastPicker = $(pickerCount).last()

    console.log(lastPicker);

    // if (pickerCount.length > 0) {

    /* $('.warning').show();
 setTimeout(function() {
	$('.warning').addClass('warning_hidden');
}, 1500)*/
    // $('#new').prop('disabled', true);
    // return;
    //}
    if ($('.datePart .datePicker').length === 0) {
      $('#new').prop('disabled', false);
    }
    if ($('.datePart .datePicker').length > 0) {
      $('#new').prop('disabled', true);
      $('#new').addClass('removeButton1');
    }

    if ($('.datePart .datePicker').length === 0 || $('.datePart .datepicker').length === 1) {
      $('#remove').prop('disabled', true); /*$('#remove').attr('disabled','true'); */
      $('#remove').addClass('removeButton1');
	}
 /* if($('.datePart .datepicker').length > 1){

        $('#updateButton').prop('disabled', false);
    }*/

  }

  situtation();


  $('#remove').on('click', function(event) {
		if ($('.datePart .datePicker').length > 1) {
      $('.datePart .datePicker').last().remove();
      $('#new').removeClass('removeButton1');
      $('.datePart .datePicker').find('.from').last().prop('disabled', false);
      $('.datePart .datePicker').find('.to').last().prop('disabled', false);
    }
    if ($('.datePart .datePicker').length === 1) {
      $('#remove').prop('disabled', true); /*$('#remove').attr('disabled','true'); */
      $('#remove').addClass('removeButton1');
    }
    $('#new').prop('disabled', false);
  });

  var getDates = function() {
    var outputArray = $('.datePart .datePicker').last().map(function(index) {
      var date = [];

      var start =
       ...