JSFiddle - React, Tailwind, and code Playground

by Andrei Balashov

HTML

<table>
  <tbody class="ui-sortable">
    <tr data-item="id">
      <td>
        <span data-name="sort" data-value="34" class="dragger ui-sortable-handle">34</span>
      </td>
      <td>
        <input type="text" name="name" value="">
      </td>
    </tr>
    <tr data-item="id">
      <td>
        <span data-name="sort" data-value="36" class="dragger ui-sortable-handle">36</span>
      </td>
      <td>
        <input type="text" name="name" value="">
      </td>
    </tr>
    <tr data-item="id">
      <td>
        <span data-name="sort" data-value="33" class="dragger ui-sortable-handle">33</span>
      </td>
      <td>
        <input type="text" name="name" value="">
      </td>
    </tr>
    <tr data-item="id">
      <td>
        <span data-name="sort" data-value="35" class="dragger ui-sortable-handle">35</span>
      </td>
      <td>
        <input type="text" name="name" value="">
      </td>
    </tr>
  </tbody>
</table>

JavaScript

$('.ui-sortable tr').sort(function(a, b) { // сортируем
  return +$(b).find('[data-name=sort]').attr('data-value') - +$(a).find('[data-name=sort]').attr('data-value');
})
.appendTo('.ui-sortable');// возвращаем в контейнер