JSFiddle - React, Tailwind, and code Playground

by Bhupesh Kushwaha

HTML

<table id="eventTable">
    <thead>
        <tr>
            <th>#</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr id="16">
            <td>1</td>
            <td><a href="www.site.com" class="moveUp">Up</a><a href="www.site.com" class="moveDown">Down</a>

            </td>
        </tr>
        <tr id="25">
            <td>2</td>
            <td><a href="www.site.com" class="moveUp">Up</a><a href="www.site.com" class="moveDown">Down</a>

            </td>
        </tr>
        <tr id="32">
            <td>3</td>
            <td><a href="www.site.com" class="moveUp">Up</a><a href="www.site.com" class="moveDown">Down</a>

            </td>
        </tr>
        <tr id="44">
            <td>4</td>
            <td><a href="www.site.com" class="moveUp">Up</a><a href="www.site.com" class="moveDown">Down</a>

            </td>
        </tr>
    </tbody>
</table>
<p><a href="www.site.nl/process.php?type=order" id="saveOrder">Save order</a>

JavaScript

$(".moveUp").click(function (e) {
      var event = e || window.event;
      event.preventDefault();
      var row = $(this).closest('tr');
      row.prev().insertAfter(row);
  });

  $(".moveDown").click(function (e) {
      var event = e || window.event;
      event.preventDefault();
      var row = $(this).closest('tr');
      row.insertAfter(row.next());
  });

  $('#saveOrder').click(function (e) {
      e.preventDefault();
      var $TRs = $('#eventTable').find('tr[id]'),
          out = [];
      for (var i = 0, len = $TRs.length; i < len; i++) {
          out.push($TRs.eq(i).attr('id'));
      }
      $('body').append('<div>' + $(this).attr("href") + "&sort=" + out.join('|') + '</div>');
  });