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>');
});