JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<ul class="photos ui-sortable">
    <li class="photo" data-id="1">1</li>
    <li class="photo" data-id="2">2</li>
    <li class="photo" data-id="3">3</li>
    <li class="photo" data-id="4">4</li>
    <li class="photo" data-id="5">5</li>
    <li class="photo" data-id="6">6</li>
</ul>

JavaScript

$('.ui-sortable').sortable({
    update: function(event, ui) {
        $('.photo').each(function(i) { 
           $(this).data('id', i+1); 
        }).filter(':first').trigger('listData');
        
    }
});

$('.photo').on('listData', function() {
    $('.photo').each(function() {
       console.log( $(this).text() + ' - ' + $(this).data('id') ); 
    });
});