JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>1</li>
<li class="delete">2</li>
<li>3</li>
<li>4</li>
</ul>
<a class="remove" href="#"> Remove position 2 </a>
CSS
ul li {
display:block;
width: 50px;
height: 50px;
background:red;
padding:5px;
margin:5px;
}
JavaScript
$(document).ready(function(){
$('ul').sortable({
stop: function(event, ui) {
updatePosition();
}
});
$('.remove').on('click', function(e){
$(".delete").remove();
updatePosition();
});
});
function updatePosition(){
$('ul li').each(function(i){
$(this).html(i + 1);
});
}