JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr class="c1">
            <td>1</td>
            <td>Title 1</td>
            <td><input type="checkbox" id="c_1" /><label for="c_1">move to top</label></td>
        </tr>
        <tr class="c2">
            <td>2</td>
            <td>Title 2</td>
            <td><input type="checkbox" id="c_2" /><label for="c_2">move to top</label></td>
        </tr>
        <tr class="c3">
            <td>3</td>
            <td>Title 3</td>
            <td><input type="checkbox" id="c_3" /><label for="c_3">move to top</label></td>
        </tr>
        <tr class="c4">
            <td>4</td>
            <td>Title 4</td>
            <td><input type="checkbox" id="c_4" /><label for="c_4">move to top</label></td>
        </tr>
        <tr class="c5">
            <td>5</td>
            <td>Title 5</td>
            <td><input type="checkbox" id="c_5" /><label for="c_5">move to top</label></td>
        </tr>
    </tbody>
</table>

CSS

th, td { border: 1px solid #d4d4d4; padding: 5px; }
thead tr { background-color: #F5F5F5; }
tr.c1 { background-color: #D2FFA5; }
tr.c2 { background-color: #FFEFBF; }
tr.c3 { background-color: #FFCDE3; }
tr.c4 { background-color: #CFCDFF; }
tr.c5 { background-color: #CDFFE9; }

JavaScript

$('table').on('change', '[type=checkbox]', function () {
     var $this = $(this);
     var row = $this.closest('tr');
     if ( $this.prop('checked') ){ // move to top
        row.insertBefore( row.parent().find('tr:first-child') )
            .find('label').html('move to bottom'); 
     }
     else { // move to bottom
        row.insertAfter( row.parent().find('tr:last-child') )
            .find('label').html('move to top');  
     }
});