JSFiddle - React, Tailwind, and code Playground

HTML

<div align="left">
    <table id="items-table" border="0" cellspacing="0" cellpadding="0" class="table table-striped">
       <thead>
           <tr>
               <th></th>
               <th></th>
               <th></th>
               <th class="confidence">Items Due (Rank)</th>
               <th></th>
               <th></th>
               <th></th>
           </tr>
       </thead>
        <tbody>
            <tr>
                <td colspan='9' class='home' >
                <div id='sortables' >
<div class='sortable' >
		<table>
			<tbody>
			<tr class='odd item radio btn-group' id='item_9'>
				<td>
				</td>
				<td>
				</td>
				<td class='confidence'>
					<input name='item[9][conf]' type='text' class='conf' value='9' id='item_9_confidence' readonly='readonly' />
		        </td>
				<td>
				</td>
				<td>
				</td>
			</tr>	</tbody>
	</table>
	</div><div class='sortable' >
		<table>
			<tbody>
			<tr class='even item radio btn-group' id='item_6'>
				<td>
				</td>
				<td>
				</td>
				<td class='confidence'>
					<input name='item[6][conf]' type='text' class='conf' value='8' id='item_6_confidence' readonly='readonly' />
		        </td>
				<td>
				</td>
				<td>
				</td>
			</tr>	</tbody>
	</table>
	</div><div class='sortable' >
		<table>
			<tbody>
			<tr class='even item radio btn-group conf-bonus' id='item_10'>
				<td>
				</td>
				<td>
				</td>
				<td class='confidence'>
					<input name='item[10][conf]' type='text' class='conf' value='7' id='item_10_confidence' readonly='readonly' />
		        </td>
				<td>
				</td>
				<td>
				</td>
			</tr>	</tbody>
	</table>
	</div><div class='sortable' >
		<table>
			<tbody>
			<tr class='even item radio btn-group' id='item_8'>
				<td>
				</td>
				<td>
				</td>
				<td class='confidence'>
					<input name='item[8][conf]' type='text' class='conf' value='5' id='item_8_confidence' readonly='readonly' />
		       ...

CSS

#items-table {
    border-bottom: 1px solid #EEEEEE;
    margin-top: 15px;
    width: 50%;
    margin-bottom: 0 !important;
}
#itemsL-table {
    border-bottom: 1px solid #EEEEEE;
    width: 50%;
    margin-bottom: 0 !important;
}
#items-table th, #itemsL-table th {
    font-size: 80%;
    text-transform: uppercase;
    color: #777;
    text-align: center;
}
table {
    width: 100%;
}
.switch table, .sortable table {
	border-collapse:separate;
	border-spacing: 0px;
}
.switch tr, .sortable tr {
	width: 100%;
}
.sortable:nth-child(2n), .switch:nth-child(2n) {
    background-color: #F9F9F9;
}
.table-striped tbody > tr:nth-child(2n+1) > td, .table-striped tbody > tr:nth-child(2n+1) > th {
    background-color: transparent !important;
}
.switch td, .sortable td {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	height: 52px; 
    text-align: center !important;
    vertical-align: middle !important;
}
.switch td.confidence input {
    -moz-transition: border 0.3s ease-out 0s;
    border: 1px solid #EEEEEE;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    width: 145px;
}
.sortable td.confidence input.conf {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    font-family: Arial;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    max-width: 130px;
    padding: 0;
    box-shadow: none;
    margin-bottom: 2px;
}
.sortable {
	cursor: move;
}

JavaScript

var form_name, list;
window.addEvent('domready', function(evt) {

	list = new Sortables($('sortables'), {
		clone: false,
		onStart: function(el, clone) {
		},
		onComplete: function(el) {
			var l, lL, confidence, count, countL;
			l =  $$('div#sortables tr.item');
			lL =  $$('div#sortablesL tr.item');
			count = l.length;
			countL = lL.length;
            
            // 1. retrieve current available ranks
            var ranks= [];
            l.each(function(item, index) {
				id = item.getProperty('id');
                confidence = $(id+'_confidence'); 
                ranks.push(confidence.value) ;
            } );
            // 2. sort the ranks, biggest first
            ranks.sort(function(a,b) { return b-a } );
            // re-inject the ranks 
            l.each(function(item, index) {
				id = item.getProperty('id');
				confidence = $(id+'_confidence');
				confidence.value = ranks[index];                
            });
		}
	});
});