JSFiddle - React, Tailwind, and code Playground

by Shemeemsha R A

HTML

<table border="true">
     <tr>
        <td>1</td>
         <td>1</td>
        <td> <button class='up'>Up</button></td>
            <td> <button class='down'>Down</button></td>
    </tr>
    <tr>
        <td>2</td>
         <td>2</td>
        <td> <button class='up'>Up</button></td>
            <td> <button class='down'>Down</button></td>
    </tr>
    <tr>
        <td>3</td>
         <td>3</td>
        <td> <button class='up'>Up</button></td>
            <td> <button class='down'>Down</button></td>
    </tr>
</table>

JavaScript

$(document).ready(function () {
     $(".up,.down").click(function () {
               
         var $element = this;
         var row = $($element).parents("tr:first");
         
         if($(this).is('.up')){
             row.insertBefore(row.prev());
         }
         
         else{
              row.insertAfter(row.next());
         }
       
    });
});