Arrange custom fields with drag and drop?

I am making theme for hotel and i made custom metabox with list of various custom fields that i would need in posts.

What i did is i made a list of fields like

• booking
• wifienabled
• coffe
• pool
• spa

and so on…

Problem is that currently i can show those custom fields in website frontend only by order how i added them in array, if i change places in my list custom fields will change places in website frontend.

Is it possible that custom fields have specific order? Some kind of drag and drop to rearange those fields and change order of display in frontend?

In this example of repeatable custom fields, we can see that the following jQuery is needed:

$('#repeatable-fieldset-one tbody').sortable({
    opacity: 0.6,
    revert: true,
    cursor: 'move',
    handle: '.sort'
});

And the HTML it controls is (simplified):

<table id="repeatable-fieldset-one" width="100%">
<thead>
    <tr>
        <th width="2%"></th>
        <th width="30%">Name</th>
        <th width="60%">URL</th>
        <th width="2%"></th>
    </tr>
</thead>
<tbody>
<?php
if ( $repeatable_fields ) :
    foreach ( $repeatable_fields as $field ) {
    ?>
        <tr>
            <td><a class="button remove-row" href="#">-</a></td>
            <td>NAME FIELD</td>
            <td>URL FIELD</td>
            <td><a class="sort">|||</a></td>
        </tr>
    <?php
    }
endif;