JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<ul class="sortable ">
    <li class="row">        
        <div>
            <span class="ordinal-position">1st</span>
             A header
            <span class="icon-button handle pull-right">[drag me]</span>
        </div>

        <div class="body" >
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        </div>
    </li>
    <li class="row">        
        <div>
            <span class="ordinal-position">2nd</span>
             A header
            <span class="icon-button handle pull-right">[drag me]</span>
        </div>

        <div class="body" >
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        </div>
    </li>
    <li class="row">        
        <div>
            <span class="ordinal-position">3th</span>
             A header
            <span class="icon-button handle pull-right">[drag me]</span>
        </div>

        <div class="body" >
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        </div>
    </li>
</ul>

CSS

ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    
}
li{
    height: 40px;
    background-color: #cdcdcd;
    margin-bottom:8px;
}
.sort-placeholder
{
    width:                      100%;
    border:                     1px dashed gray;
    background-color:           #fff;
    margin:                     8px 0;
}
.pull-right
{
    float: right;
}

}

JavaScript

$(".sortable").sortable(
    {
      handle:         '.handle'
    , placeholder:    'sort-placeholder'
    , forcePlaceholderSize: true
    , start: function( e, ui )
    {
        ui.item.data( 'start-pos', ui.item.index()+1 );
    }
    , change: function( e, ui )
      {
          var seq
          , startPos = ui.item.data( 'start-pos' )
          , $index
          , correction
          ;

          // if startPos < placeholder pos, we go from top to bottom
          // else startPos > placeholder pos, we go from bottom to top and we need to correct the index with +1
          //
          correction = startPos <= ui.placeholder.index() ? 0 : 1;

          ui.item.parent().find( 'li.row').each( function( idx, el )
          {
            var $this = $( el )
            , $index = $this.index()
            ;

            // correction 0 means moving top to bottom, correction 1 means bottom to top
            //
            if ( ( $index+1 >= startPos && correction === 0) || ($index+1 <= startPos && correction === 1 ) )
            {
              $index = $index + correction;
              $this.find( '.ordinal-position').text( $index + ordinalSuffix( $index ) );
            }

          });

          // handle dragged item separatelly
          seq = ui.item.parent().find( 'li.sort-placeholder').index() + correction;
          ui.item.find( '.ordinal-position' ).text( seq + ordinalSuffix( seq ) );
      }
    } );

  function ordinalSuffix( number )
    {
      var suffix = '';

      if ( number / 10 % 10 === 1 )
      {
        suffix = "th";
      }
      else if ( number > 0 )
      {

        switch( number % 10 )
        {
          case 1:
            suffix = "st";
            break;
          case 2:
            suffix = "nd";
            break;
          case 3:
            suffix = "rd";
            break;
          default:
            suffix = "th";
            break;
        }
      }
      return suffix;
    }