JSFiddle - React, Tailwind, and code Playground

HTML

<div id='column1' class='col'>
  <div id='contentItem_1'>
    ITEM 1
    <input class='itemcurrposition' name='item[1][currposition]' value='1' />
    <input class='itemcolumnnum' name='item[1][columnnum]' value='1' />
  </div>
  <div id='contentItem_2'>
    ITEM 2
    <input class='itemcurrposition'name='item[2][currposition]' value='2' />
    <input class='itemcolumnnum' name='item[2][columnnum]' value='1' />
  </div>
</div>
<div id='column2' class='col'>
  <div id='contentItem_3'>
    ITEM 3
    <input class='itemcurrposition'name='item[3][currposition]' value='3' />
    <input class='itemcolumnnum'name='item[3][columnnum]' value='2' />
  </div>
  <div id='contentItem_4'>
    ITEM 4
    <input class='itemcurrposition' name='item[4][currposition]' value='4' />
    <input class='itemcolumnnum' name='item[4][columnnum]' value='2' />
  </div>
</div>
<div id='column3' class='col'>
  <div id='contentItem_5'>
    ITEM 5
    <input class='itemcurrposition'name='item[5][currposition]' value='5' />
    <input class='itemcolumnnum' name='item[5][columnnum]' value='3' />
  </div>
  <div id='contentItem_6'>
    ITEM 6
    <input class='itemcurrposition' name='item[6][currposition]' value='6' />
    <input class='itemcolumnnum' name='item[6][columnnum]' value='3' />
  </div>
</div>

CSS

.col{
border:2px solid green;
margin:5px;    
}

JavaScript

$(document).ready (function () {
    $('#column1, #column2, #column3').sortable ({
    connectWith: '.col',
    stop: function (event, ui) {
//      var inputs2 = $('input.itemcurrposition');
 //     var nbElems2 = inputs2.length;
//      $('input.itemcurrposition').each(function(idx) {
  //      $(this).val(nbElems2 - idx);          
    //  });
      
      newval = ui.item.closest('.col').index()+1;
      ui.item.find("input.itemcolumnnum").val(newval);
      
        
    }
    })
});