JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<center>
    <h1>Sortable table</h1>

    <p>The original Post in the <a href="http://designpoodles.com/avtex/sortable-table/" target="_blank">Original Demo</a>
        <br />The <a href="http://www.avtex.com/blog/2015/01/27/drag-and-drop-sorting-of-table-rows-in-priority-order/" target="_blank">original Post can be found by clicking here</a> and going to the address below:
        <br />http://www.avtex.com/blog/2015/01/27/drag-and-drop-sorting-of-table-rows-in-priority-order/</p>
</center>
<table class="table" id="diagnosis_list">
    <thead>
        <tr>
            <th>Priority</th>
            <th>Name</th>
            <th>Favorite fruit</th>
            <th>Vegetarian?</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class='priority'>
                <input name="sequence" value="1" size="6" />
            </td>
            <!--Added INPUT field  in the td class priority-->
            
            <td>George Washington</td>
            <td>Apple</td>
            <td>N</td>
            <td><a class='btn btn-delete btn-danger'>Delete</a>

            </td>
        </tr>
        <tr>
            <td class='priority'>
                <input name="sequence" value="2" size="6" />
            </td>
            <td>John Adams</td>
            <td>Pear</td>
            <td>Y</td>
            <td><a class='btn btn-delete btn-danger'>Delete</a>

            </td>
        </tr>
        <tr>
            <td class='priority'>
                <input name="sequence" value="3" size="6" />
            </td>
            <td>Thomas Jefferson</td>
            <td>Banana</td>
            <td>Y</td>
            <td><a class='btn btn-delete btn-danger'>Delete</a>

      ...

CSS

.ui-sortable tr {
    cursor:pointer;
}
.ui-sortable tr:hover {
    background:rgba(244, 251, 17, 0.45);
}

JavaScript

$(document).ready(function () {
    //Helper function to keep table row from collapsing when being sorted
    var fixHelperModified = function (e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function (index) {
            $(this).width($originals.eq(index).width());
        });
        return $helper;
    };

    //Make diagnosis table sortable
    $("#diagnosis_list tbody").sortable({
        helper: fixHelperModified,
        stop: function (event, ui) {
            renumber_table('#diagnosis_list')
        }
    }).disableSelection();


    //Delete button in table rows
    $('table').on('click', '.btn-delete', function () {
        tableID = '#' + $(this).closest('table').attr('id');
        r = confirm('Delete this item?');
        if (r) {
            $(this).closest('tr').remove();
            renumber_table(tableID);
        }
    });

});

//Renumber table rows
function renumber_table(tableID) {
    $(tableID + " tr").each(function () {
        count = $(this).parent().children().index($(this)) + 1;

        ////This is the line I updated.
        $(this).find('.priority :input').val(count);

    });
}