JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table id="fruit_sort">
			<thead>
				<th>Name</th>
				<th>Amount</th>
			</thead>
			<tbody>
				<tr>
					<td id="fruit_1" class="canvas-head">Pear</td>
					<td>10</td>
				</tr>
				<tr>
					<td id="fruit_1" class="canvas-head">Apple</td>
					<td>30</td>
				</tr>
				<tr>
					<td id="fruit_1" class="canvas-head">Orange</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>

JavaScript

(function(){
  $('#fruit_sort').sortable({
    items: "td:not(.canvas-head)"
  });
})();