JSFiddle - React, Tailwind, and code Playground

HTML

<body>11-201430
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Имя</th>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
                <th>6</th>
                <th>7</th>
                <th>8</th>
                <th>9</th>
                <th>10</th>
                <th>11</th>
                <th>12</th>
                <th>13</th>
                <th>14</th>
                <th>15</th>
                <th>16</th>
                <th>17</th>
                <th>18</th>
                <th>19</th>
                <th>20</th>
                <th>21</th>
                <th>22</th>
                <th>23</th>
                <th>24</th>
                <th>25</th>
                <th>26</th>
                <th>27</th>
                <th>28</th>
                <th>29</th>
                <th>30</th>
            </tr>
        </thead>
        <tbody id="selectable">
            <tr>
                <td>1</td>
                <td>Petrov</td>
                <td id="selectable" class="tdItem ui-state-default">D</td>
                <td id="selectable" class="tdItem ui-state-default">D</td>
                <td id="selectable" class="tdItem ui-state-default">D</td>
                <td id="selectable" class="tdItem ui-state-default"></td>
                <td id="selectable" class="tdItem ui-state-default"></td>
                <td id="selectable" class="tdItem ui-state-default"></td>
                <td id="selectable" class="tdItem ui-state-default">S</td>
                <td id="selectable" class="tdItem ui-state-default">S</td>
                <td id="selectable" class="current_date tdItem ui-state-default" style="background:red">S</td>
                <td id="selectable" class="tdItem ui-state-default"></td>
                <td id="selectable" class="tdItem ui-state-default"></td>
                <td id="selectable" class="tdItem...

CSS

tr {
     vertical-align: middle;
     text-align: center;
 }
 #feedback {
     font-size: 1.4em;
 }
 #selectable .ui-selecting {
     background: #FECA40;
 }
 #selectable .ui-selected {
     background: #F39814;
     color: white;
 }
 #selectable {
     list-style-type: none;
     margin: 0;
     padding: 0;
     width: 30px;
 }
 #selectable li {
     margin: 3px;
     padding: 1px;
     float: left;
     width: 100px;
     height: 80px;
     font-size: 4em;
     text-align: center;
 }

JavaScript

$("#selectable").selectable({
    filter: ".tdItem"
});
$('#S_state').click(function () {
    var x = $('#selectable .ui-selected');
    x.text('S');
    var data = x.map(function (i, el) {
        return {
            id: $("td:eq(0)", el.parentNode).text(),
            day: $("th:eq(" + $(el).index() + ")", el.parentNode.parentNode.parentNode).text(),
            status: $(el).text()
        }
    }).get();
    console.log(JSON.stringify(data));
    $.post('/echo/json/', {
        data: data
    }, function (res) {

    });
});