JSFiddle - React, Tailwind, and code Playground

HTML

<table id="availability">
    <tr>
        <th class="lat-header rotate"></th>
        <th><span class='rotate'>Mattino</span></th>
        <th><span class="rotate">Pomeriggio</span></th>
        <th><span class='rotate'>Sera</span>
            <th class="rotate"><span class='rotate'>Fulltime</span>
    </tr>

        <th class="lat-header">Lun</th>
        <td data-role="00"></td>
        <td data-role="01"></td>
        <td data-role="02"></td>
        <td data-role="03"></td>
    </tr>
    <tr id="day_[1]">
        <th class="lat-header">Mar</th>
        <td data-role="10"></td>
        <td data-role="11"></td>
        <td data-role="12"></td>
        <td data-role="13"></td>
    </tr>
    <tr id="day_[2]">
        <th class="lat-header">Mer</th>
        <td data-role="20"></td>
        <td data-role="21"></td>
        <td data-role="22"></td>
        <td data-role="23"></td>
    </tr>
</table>

CSS

table#availability {
    text-align:center;
    width:100%;
}
table#availability th, table#availability td {
    display: inline-block;
    width: 16%;
    height: 4em;
    padding: 0;
    margin: 5px;
    font-size: 12px;
    line-height:4em;
}
table#availability td {
    background-color: aqua;
    display: inline-block;
    transition: background-color ease 0.5s
}
table#availability td.cellSelected {
    background-color:#00ff00;
}
table#availability th.lat-header {
    width: 2em;
    text-align: right;
    position:relative;
    left:-1em;
}

table#availability th .rotate {
    display:inline-block;
    width:60px;
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    text-align:left;
   
}

JavaScript

var availMatrixArr = []; //array of clicked elements
jQuery('table#availability td').click(function () {
    var selElIndex = $(this).attr('data-role');
    var indexInArr = jQuery.inArray(selElIndex, availMatrixArr);
    if (indexInArr > -1) {
        $(this).removeClass('cellSelected');
        availMatrixArr.splice(indexInArr, 1);
    } else {
        availMatrixArr.push(selElIndex);
        $(this).addClass('cellSelected');
    }
    console.log(selElIndex);
    console.log(availMatrixArr);
});