JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<table id="mytable" border="1">
<thead>
<tr>
<th>Rank
</th>
<th colspan="5">
<p align="center">The Criteria
</th>
</tr>
    </thead>
    <tbody>

<tr>
<td>
<p align="center">1
</td>

<td>
<form name="form1" method="post" style="margin: 0; text-align: center;"> 
<input type="button" name="Up1" value="Up" onclick="moveUp.call(this);"> Item 1
<input type="button" name="Down1" value="Down" onclick="moveDown.call(this);">
</form>
</td>

<td>
<form name="form2" method="post" style="margin: 0; text-align: center;"> 
<input type="button" name="Up2" value="Up" onclick="moveUp.call(this);"> Item 2
<input type="button" name="Down2" value="Down" onclick="moveDown.call(this);">
</form>
</td>

<td>
<form name="form3" method="post" style="margin: 0; text-align: center;"> 
<input type="button" name="Up3" value="Up" onclick="moveUp.call(this);"> Item 3
<input type="button" name="Down3" value="Down" onclick="moveDown.call(this);">
</form>
</td>

<td>
<form name="form4" method="post" style="margin: 0; text-align: center;"> 
<input type="button" name="Up4" value="Up" onclick="moveUp.call(this);"> Item 4
<input type="button" name="Down4" value="Down" onclick="moveDown.call(this);">
</form>
</td>

<td>
<form name="form5" method="post" style="margin: 0; text-align: center;"> 
<input type="button" name="Up5" value="Up" onclick="moveUp.call(this);"> Item 5
<input type="button" name="Down5" value="Down" onclick="moveDown.call(this);">
</form>
</td>

</tr> 
    </tbody>
</table>

JavaScript

var table = document.getElementById( 'mytable' );
var filler = document.createElement( 'td' );
filler.className = 'filler';
filler.innerHTML = '*';

function moveUp() {
    var cell = this.parentNode.parentNode;
    var row = cell.parentNode;
    var row_above;
    if( row.rowIndex === 1 ) {
        row_above = table.insertRow( 1 );
        row_above.insertCell( 0 );
        update_row_numbers();
    } else {
        row_above = table.rows[ row.rowIndex - 1 ];
    }
    if( row_above.cells[ 1 ] && row_above.cells[ 1 ].className === 'filler' ) {
        row_above.removeChild( row_above.cells[ 1 ] );
    }
    row_above.appendChild( cell );
    if( row.cells.length === 1 ) {
        if( row.rowIndex < table.rows.length - 1 ) {
            row.appendChild( filler.cloneNode( true ) );
        } else {
            table.deleteRow( table.rows.length - 1 );
            update_row_numbers();
        }
    }
}
function moveDown() {
    var cell = this.parentNode.parentNode;
    var row = cell.parentNode;
    var row_below;
    if( row.rowIndex === table.rows.length - 1 ) {
        row_below = table.insertRow( table.rows.length );
        row_below.insertCell( 0 );
        update_row_numbers();
    } else {
        row_below = table.rows[ row.rowIndex + 1 ];
    }
    if( row_below.cells[ 1 ] && row_below.cells[ 1 ].className === 'filler' ) {
        row_below.removeChild( row_below.cells[ 1 ] );
    }
    row_below.appendChild( cell );
    if( row.cells.length === 1 ) {
        if( row.rowIndex > 1 ) {
            row.appendChild( filler.cloneNode( true ) );
        } else {
            table.deleteRow( 1 );
            update_row_numbers();
        }
    }
}

function update_row_numbers() {
    for( var i = 1; i < table.rows.length; i++ ) {
        table.rows[i].cells[0].innerHTML = i;
    }
}