JSFiddle - React, Tailwind, and code Playground

HTML

<div id="index"></div>
<div class="sortable">
    <div class="nosort">NO SORT DIV</div>
    <div>Apple</div>
    <div>Banana</div>
    <div>Melon</div>
    <div>Peach</div>
    <div>Cherry</div>
</div>

<div class="sortable">
    <div class="nosort">NO SORT DIV</div>
    <div>Apple</div>
    <div>Banana</div>
    <div>Melon</div>
    <div>Peach</div>
    <div>Cherry</div>
</div>

CSS

#index {
    border:1px solid blue;
    width: 20px;
    height: 20px;
}
.sortable div {
    margin: 5px;
    background-color: grey;
}
.sortable div.nosort {
    background-color: red;
}

JavaScript

$(document).ready(function () {
    $('.sortable').sortable({
        items: '> *:not(.nosort)',
        axis: 'y',

        stop: function (event, ui) {
            var parent = $(this); //in case you have multiple .sortable classes
            var index = parent.children(':not(.nosort)').index($(ui.item));
            $('#index').text(index);
        }
    }).disableSelection();
});