JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/black-tie/jquery-ui.css">
<table id="famequotes">
    <tr>
        <td id="par001">It was the best of times, it was the worst of times.</td>
    </tr>
    <tr>
        <td id="par002">Two things are infinite: the universe and human stupidity; and I'm not sure about the universe</td>
    </tr>
    <tr>
        <td id="par003">In the jungle, the mighty jungle, the lion sleeps tonight...</td>
    </tr>
</table>
<div id="log"></div>

CSS

td {
    cursor: default;
}
#famequotes .ui-selected {
    background: orange;
}

JavaScript

$(document).ready(function () {
    $('#famequotes').selectable({
        filter: 'td',
        start: function (event, ui) {
            $('#log').append('<div>selction start: ' + $(event.toElement).attr('id') + '</div>');
        },
        selected: function (event, ui) {
            $('#log').append('<div>selected item: ' + $(ui.selected).attr('id') + '</div>');
        },
        stop: function (event, ui) {
            var lastSelElem = $('#famequotes').find('td.ui-selected').last();
            $('#log').append('<div>selection end: ' + $(lastSelElem).attr('id') + '</div>');
        }
    });
});