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 ui-state-default" ></td><td id="selectable" class="tdItem ui-state-default" >K</td><td id="selectable" class="tdItem ui-state-default" >K</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" >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" >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"...

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

$(function() {
    $( "#selectable" ).selectable({
  filter: ".tdItem"
});
   $('#D_state').click(
       function(){
       var x = $('#selectable .ui-selected'); 
	x.text('D'); 
   	console.log(x);
       });
   $('#K_state').click(
       function(){
       var x = $('#selectable .ui-selected'); 
	x.text('K'); 
   	console.log(x);
       });
   $('#S_state').click(
       function(){
       var x = $('#selectable .ui-selected'); 
	x.text('S'); 
   	console.log(x);
       });
   $('#clear').click(
       function(){
       var x = $('#selectable .ui-selected'); 
	x.text(''); 
   	console.log(x);
       });
  });