JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>

<form id="optionsForm" class="showInGrid">
    <input id="from" class="inputDates"/>
    <input id="to" class="inputDates"/>

    <select name="occurrence" id="occurrence">
        <option disabled selected> - Occurrence - </option>
        <option value="0">One Time</option>
        <option value="7">Weekly</option>
        <option value="30">Monthly</option>
        <option value="15">Bi-Monthly</option>
    </select>
</form>

<button id="editCalendar">Edit</button>
<div id="myCalendar"></div>

CSS

/* begin: jQuery UI Datepicker moving pixels fix */
    table.ui-datepicker-calendar {border-collapse: separate;}
    .ui-datepicker-calendar td {border: 1px solid transparent;}
/* end: jQuery UI Datepicker moving pixels fix */

/* begin: jQuery UI Datepicker emphasis on selected dates */
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
    background: #743620 none; /* a color that fits the widget theme */
    color: white; /* a color that is readeable with the color above */
}
div.ui-datepicker{
 font-size:9px;
}

JavaScript

$(document).ready(function () {

    var getDatesBackup=[];
    var date = new Date();
    $("#from").datepicker({onClose:function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
    }});
    $("#to").datepicker({onClose:function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
    }});

    $("#editCalendar").click(function(){
        console.log("Save");
        var $this = $(this);
         $this.toggleClass("editCalendar");
        if($this.hasClass('editCalendar')){
            $this.text('Save');
            $("#myCalendar").multiDatesPicker('disable');
            console.log("Save");
        } else {
            $this.text('Edit');
            $("#myCalendar").multiDatesPicker('enable');
            console.log("Edit");
        }

    });

   
    $('#occurrence').change( function() {

        //index to each month of the year.
        var monthIndex = [0,1,2,3,4,5,6,7,8,9,10,11];

        var start = $("#from").datepicker("getDate");
        var end = $("#to").datepicker("getDate");

        var startYear = start.getFullYear();
        var endYear = end.getFullYear();
        var yearDifference = (12 * (endYear - startYear)) + end.getMonth();
        //console.log("Year Difference: "+yearDifference+" end year: "+ endYear + " start year: "+ startYear);

        var currentDate = new Date(start),
                endDate = new Date(end),
                between = new Array();
        var selected = new Array();

        var interval = $('select[name="occurrence"]').val();
        var delay = 0;
        var showDates = [];


        var today = new Date();
        var year = today.getFullYear();
        $("#myCalendar").multiDatesPicker({numberOfMonths:[3, 4]});

        //Save the size of the selected dates array.
        var selectedArrayLength;

        //Save the range of dates in the between array.
        while (currentDate <= endDate) {
            between.push(new...