JSFiddle - React, Tailwind, and code Playground

by nictrix

HTML

<h4>Order of your favorite Animals</h4><br>
<div id='sort-list'>
  <div id='listItem_1'>
    <li>dog<input id='1' type='text' name='1' value='1'></li>
  </div>
  <div id='listItem_2'>
      <li>cat<input id='2' type='text' name='2' value='2'></li>
  </div>
  <div id='listItem_3'>
      <li>mouse<input id='3' type='text' name='3' value='3'></li>
  </div>
</div>

JavaScript

$(function() {
    $( '#sort-list' ).sortable({
        stop: function (event, ui) {
            var inputs = $('input');
            var input_length = inputs.length;
             $($("input").get().reverse()).each(function(idx) {
                var newvalue = $(input_length - idx);                
                $(this).attr('id',$(newvalue)[0]);
                $(this).attr('name',$(newvalue)[0]);
                $(this).attr('value',$(newvalue)[0]);
            });
        }
    });
    $( "#sort-list" ).disableSelection();
});