JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js" type="text/javascript"> </script>

<table class="tracklist"><tr>
    <td class="numcol">1.&nbsp;&nbsp;</td>
    <td class="artistcol">&nbsp;&nbsp;<span class="eachtrack">Mary Karlzenz</span></td>
    <td class="titlecol">&nbsp;&nbsp;<span title="Click to edit tracklist" class="eachtrack">Run Rudolf Run</span></td>
    <td class="timecol"><span class="timewrap"><span title="Click to Edit Track Time" class="tracktime">00:00</span><span class="handle" title="Move Track Position">&nbsp;</span></span></td>
    <td class="btnwrap"><span class="addt_outer"><span class="addt_inner"><span class="addt"><a style="display: block;" class="pngfix" href="#" name="" title="Add track">&nbsp;+</a></span></span></span><span class="deleteouter"><span class="deleteinner"><span class="deletet" onclick="return confirm('Are you sure you want to delete this track?')"><a style="display: block;" class="pngfix" href="#" name="" title="Delete track"></a></span></span></span></td>
  </tr>
  <tr>
    <td class="numcol">2.&nbsp;&nbsp;</td>
    <td class="artistcol">&nbsp;&nbsp;<span class="eachtrack">Juliana Hatfield</span></td>
    <td class="titlecol">&nbsp;&nbsp;<span class="eachtrack">Make It Home</span></td>
    <td class="timecol"><span class="timewrap"><span title="Click to Edit Track Time" class="tracktime">00:00</span><span class="handle" title="Move Track Position">&nbsp;</span></span></td>
    <td class="btnwrap"><span class="addt_outer"><span class="addt_inner"><span class="addt"><a class="pngfix" href="#" name="" title="Add track">&nbsp;+</a></span></span></span><span class="deleteouter"><span class="deleteinner"><span class="deletet" onclick="return confirm('Are you sure you want to delete this track?')"><a class="pngfix" href="#" name="" title="Delete track"></a></span></span></span></td>
  </tr></table>

CSS

.tracklist{
    width:100%;
    color:white;
}
.tracklist td {
    border-left:2px solid white;
    border-top:2px solid white;
    cursor:hand;
    cursor:pointer;

}
.numcol {
    text-align:right;
    width:4%;
    background:#1a070b;
}
.artistcol,
.titlecol,
.infocol{
    background: #762f3a;
    overflow:hidden;
    width:20%;
}
.timecol{
    width:14%;
    padding-left:8px;
    background: #762f3a;
}
a{
    text-decoration:none;
}

JavaScript

var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};
$(".tracklist").sortable({
    placeholder: "track-highlight",
    helper: fixHelper,
    items: "tr",
    start: function(event, ui) {
        i = 0;
        notdragged = false;
        thisthing = $(this);
    },
    stop: function(event, ui) {
        notdragged = true;
    },
    revert: true,
    update: function(event, ui) {
        $(".tracklist .numcol").each(function() {
            $(this).html("");
        });
        $(".tracklist .numcol").each(function(index) {
            $(this).html(index + 1 + ".&nbsp;&nbsp;");
        });
    }

});

$(".eachtrack").editable("", {
    select: true,
    style: "display: inline",
    width: "95%",
    cancel: "<button class=\'cancelthistrack\'>Cancel<\/button>",
    submit: "<button class=\'savethis\'>Save<\/button>",
    event: "custom_event"
});

$(".tracklist tr td .eachtrack").live("mousedown", function() {
    notdragged = true;
}).live("mouseup", function() {
    if (notdragged) {
        $(this).trigger("custom_event");
        $(this).parent().css("height", "auto");
    }
});
$(".artistcol,.infocol,.titlecol").live("mousedown", function() {
    notdragged = true;
}).live("mouseup", function() {
    if (notdragged) {
        $(this).children(".eachtrack").trigger("custom_event");
    }
});

$(".tracklist tr .btnwrap .addt_outer .addt_inner .addt .pngfix").click(function() {
    var thisrow = $(this).parents("tr");
    var clone = thisrow.clone(false, false);
    clone.find(".eachtrack").editable("save.php", {
        select: true,
        style: "display: inline",
        width: "95%",
        cancel: "<button class=\'cancelthistrack\'>Cancel<\/button>",
        submit: "<button class=\'savethis\'>Save<\/button>",
        event: "custom_event"
    }).end().find(".tracklist tr td .eachtrack").live("mousedown", function() {
        notdragged = true;
    }).live("mouseup",...