JSFiddle - React, Tailwind, and code Playground

HTML

<ol id="sortable" class="ui-sortable">
  <li style="margin-left:10px; width:100%;" class="block_anchor" data-id="498">Step 1</li>
  <li style="margin-left:10px; width:100%;" class="block_anchor" data-id="499">Step 2</li>
  <li style="margin-left:10px; width:100%;" class="block_anchor" data-id="500">Step 3</li>
  <li style="margin-left:10px; width:100%;" class="block_anchor" data-id="501">Step 4</li>
</ol>

CSS

ol {
  display: inline-flex;
  flex-direction: column;
}

ol > li {
  
}

JavaScript

$('#sortable li').map(function(i, item){
  	var id = $(item).attr("data-id");
    
    // This will set the order of each item based on the position in the array.
    $('li[data-id='+ id +']').css('order', i)
    
    $('li[data-id='+ id +']').on( "click", function() {
      console.log("Clicked");

      var clickedItem = $('li[data-id='+ id +']'),
          currentOrder = Number(clickedItem.css('order'));

      clickedItem.css('order', currentOrder + 1);
    })
});