JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.15/rr-1.2.0/sc-1.4.2/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.15/rr-1.2.0/sc-1.4.2/datatables.min.js"></script>
    <div class="row">
        <div class="col-lg-7 col-lg-offset-1">
            <table class="table table-condensed table-album-sounds">
            <thead><tr><th></th><th></th><th></th><th></th></tr></thead>
                <tbody>
                <tr class="play-song song-active" data-soundid="1" data-href="xxx" data-hrefreorder="yyy">
                    <td width="10px">2</td>
                    <td width="20px"><a href="zzz"><i class="fa fa-link" aria-hidden="true"></i></a></td>
                    <td class="switch-song"><i class="fa fa-play" aria-hidden="true"></i> title1</td>
                    <td class="switch-song ast-duration">00:20</td>
                </tr>
                
                <tr class="play-song" data-soundid="2" data-href="xxx" data-hrefreorder="yyy">
                    <td width="10px">3</td>
                    <td width="20px"><a href="zzz"><i class="fa fa-link" aria-hidden="true"></i></a></td>
                    <td class="switch-song"><i class="fa fa-play" aria-hidden="true"></i> title2</td>
                    <td class="switch-song ast-duration">00:20</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

JavaScript

$(document).ready(function(){
let table = $('.table-album-sounds').DataTable( {
        paging: false,
        scrollY: 400,
        searching: false,
        rowReorder: {
            update: true,
        },

        fnDrawCallback: function() {
            $(".table-album-sounds thead").remove();
        }
    });

    table.on( 'row-reorder', function ( e, diff, edit ) {
        let href = diff[1].node.dataset.hrefreorder;

        console.log('asked to move some rows');

        let moved = [];

        for ( let i=0, ien=diff.length ; i<ien ; i++ ) {
            let rowData = table.row( diff[i].node ).data();
            moved.push({'soundid': diff[i].node.dataset.soundid, 'oldPosition': diff[i].oldPosition + 1, 'newPosition': diff[i].newPosition + 1});
        }

        console.log("will be asking backend");

        $.post({
            url: href,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: JSON.stringify({'data': moved}),
        }).done(function( data ) {
            console.log("position changed in database successfully.");
            return true;
        }).fail(function(data) {
            // nope
            console.log("Ajax fail");
            // table.draw(false);
            e.stopPropagation();
        });
        // default
        e.stopPropagation();
    } );
});