JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div class="book-pack">
    [ <a class="button" id="club-class">Club</a> ]
    [ <a class="button" id="essential">Essential</a> ]
    [ <a class="button" id="last-fling">Last Fling</a> ]
</div>

<div class="window">
    <h2 class="page-title">&nbsp;</h2>
    Chosen date: <span id="getDate"></span>, id = <span id="getId"></span>
</div>

<div id="datepicker"></div>

CSS

h2 { font-size: 18px; font-weight: bold; }

JavaScript

jQuery(document).ready(function() {

    (function calendar($j) {

        function datePicker(pack) {
            // create array of dates from pack
            var i, array = [];
            for (var i in pack) {
                array.push(i);
            }

            $j("#datepicker").datepicker({
                dateFormat: 'dd-mm-yy',
                minDate: $j.datepicker.parseDate('ddmmyy', array[0]),
                //this makes the datepicker start at the first available
                beforeShowDay: function(dateToShow) {
                    return ($j.inArray($j.datepicker.formatDate('ddmmyy', dateToShow), array) !== -1) ? [1, 'my-class', 'Available date!'] : [0, 'no-class', 'Date not available!'];
                },
                //get the selected date
                onSelect: function(dateText, inst) {
                    var dateAsString = dateText,
                        //the first parameter of this function
                        dateCompressed = (dateText).replace(/-/g, ''); // dd-mm-yyyy -> ddmmyyyy
                    
                    $j('#getDate').text(dateAsString);
                    $j('#getId').text(pack[dateCompressed]);

                }

            });
        }


        $j('.book-pack a.button').each(function() {

            //getting the button id
            var btnId = $j(this).attr('id');

            //arrays with available dates for the 3 packs
            var datesClub = { '08102010' : 'id1', '09102010' : 'id2', '15102010' : 'id3', '16102010' : 'id4', '22102010' : 'id5', '23102010' : 'id6', '29102010' : 'id7', '30102010' : 'id8' };
            var datesEssential =  { '08102010' : 'id1', '09102010' : 'id2', '15102010' : 'id3', '16102010' : 'id4', '22102010' : 'id5', '23102010' : 'id6', '29102010' : 'id7', '30102010' : 'id8' };
            var datesFling =  { '08102010' : 'id1', '09102010' : 'id2', '15102010' : 'id3', '16102010' : 'id4', '22102010' : 'id5', '23102010' : 'id6', '29102010' : 'id7', '30102010' :...