JSFiddle - React, Tailwind, and code Playground

by Chandana Thota

HTML

<a class="reorder-questions">Reorder Questions</a>

<table id="qa-table">
    <thead>
        <tr>
            <td>Question & Answers Data Table</td>
        </tr>
    </thead>
    <tbody>
        <tr class="sortable-row" data-question-id="1">
            <td>Who?</td>
        </tr>
        <tr data-answer-id="1" data-option="a">
            <td>Option A for question "who?"</td>
        </tr>
        <tr data-answer-id="1" data-option="b">
            <td>Option B for question "who?"</td>
        </tr>
        <tr data-answer-id="1" data-option="c">
            <td>Option C for question "who?"</td>
        </tr>
        <tr data-answer-id="1" data-option="d">
            <td>Option D for question "who?"</td>
        </tr>
        <tr class="sortable-row" data-question-id="2">
            <td>What?</td>
        </tr>
        <tr data-answer-id="2" data-option="a">
            <td>Option A for question "what?"</td>
        </tr>
        <tr data-answer-id="2" data-option="b">
            <td>Option B for question "what?"</td>
        </tr>
        <tr data-answer-id="2" data-option="c">
            <td>Option C for question "what?"</td>
        </tr>
        <tr data-answer-id="2" data-option="d">
            <td>Option D for question "what?"</td>
        </tr>
        <tr class="sortable-row" data-question-id="3">
            <td>Where?</td>
        </tr>
        <tr data-answer-id="3" data-option="a">
            <td>Option A for question "where?"</td>
        </tr>
        <tr data-answer-id="3" data-option="b">
            <td>Option B for question "where?"</td>
        </tr>
        <tr data-answer-id="3" data-option="c">
            <td>Option C for question "where?"</td>
        </tr>
        <tr data-answer-id="3" data-option="d">
            <td>Option D for question "where?"</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 100%;
    font-family:'arial';
    font-size: 0.8em;
}
thead > tr > td {
    font-weight: 700;
    padding: 10px 0px;
}
td {
    padding: 5px 10px;
}
.sortable-row {
    background-color: rgba(89, 196, 230, 0.5);
}
.reorder-questions {
    display: inline-block;
    padding: 5px 10px;
    background-color: rgb(255, 192, 98);
    border: 1px solid rgb(206, 165, 0);
    border-radius: 3px;
    margin: 0px 0 20px 0;
    font-weight: 700;
}
.reorder-questions:hover {
    cursor: pointer;
    color: #000;
}
.reorder-mode-true {
    background-color: rgb(135, 216, 135);
    border: 1px solid rgb(63, 180, 72);
}
.ui-sortable:not(.ui-sortable-disabled) > tbody > tr.sortable-row:hover {
    cursor: move;
}
.ui-sortable:not(.ui-sortable-disabled) > tbody > tr.sortable-row > td {
    border-top: 1px dashed #ccc;
}

JavaScript

var sortableHelper = function (e, ui) {
          ui.children().each(function () {
              $(this).width($(this).width());
          });
          return ui;
      };

      function demoSort() {
          $('#qa-table').sortable({
              items: 'tr.sortable-row',
              opacity: '.5',
              helper: sortableHelper,
              start: function (e, ui) {
                  ui.placeholder.height(ui.helper.outerHeight());
              },
              update: function (e, ui) {
                  var tableHasUnsortableRows = $(this).find('> tbody > tr:not(.sortable-row)').length;
                  $(this).find('> tbody > tr.sortable-row').each(function (idx, row) {

                      /* If we are reordering a table with some fixed rows, make sure the fixed rows
                       * always follow their corresponding sortable row so they always appear together. */
                      if (tableHasUnsortableRows) {
                          var uniqID = $(this).attr('data-question-id'),
                              correspondingFixedRow = $('tr:not(.sortable-row)[data-answer-id=' + uniqID + ']');
                          correspondingFixedRow.detach().insertAfter($(this));
                      }
                  });
              }
          }).disableSelection();
      }

      $(document).ready(function () {
          $('.reorder-questions').click(function () {
              $(this).toggleClass('reorder-mode-true');
              var $tableToReorder = $("#qa-table");

              if ($(this).hasClass('reorder-mode-true')) {
                  /* Initialize/enable jquery sortable */
                  $tableToReorder.data("ui-sortable") ? $tableToReorder.sortable('enable') : demoSort();
                  /* Hide rows that should not be sortable */
                  $tableToReorder.find('> tbody > tr:not(.sortable-row)').hide();
                  $(this).text('Done Reordering');
              } else {
                 ...