Как вывести сохраненную позицию блока из Localstorage

[Aruta]

Добрый день!

Создаю "приложение" для сайта.

нужно, чтобы, при перемещении блока А на место блока В, позиция блоков сохранялась и при следующем запуске браузера или обновлении страницы блок А также отобразился на месте блока В.

С кодом перемещения блоков мне помогли, но я в него дописываю сохранение данных в локальное хранилище и не работает.
Главное если отдельно кусок кода с записью в хранилище пишу в консоль браузера, то он отрабатывает. Но только на запись.

Подскажите, пожалуйста, как это исправить!

<div id="order-1" class="order__wrap dflex">
  <div class="order__half dflex">
    <div class="order__nav dflex">
      <div id="pos_up" class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
        ....	
      </div>				
      <div id="pos_down" class="nav__triangle-down dflex">  //кнопка перемещения заказа вниз на 1 строку
        ....
      </div>
    </div>
    <div class="order_position">
      <span id="position1">1)</span>    //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
    </div>
    <div class="order__data">
      ...
    </div>
  </div>
</div>
<div id="order-2" class="order__wrap dflex">
  <div class="order__half dflex">
    <div class="order__nav dflex">
      <div id="pos_up" class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
        ....	
      </div>				
      <div id="pos_down" class="nav__triangle-down dflex">  //кнопка перемещения заказа вниз на 1 строку
        ....
      </div>
    </div>
    <div class="order_position">
      <span id="position2">2)</span>    //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
    </div>
    <div class="order__data">
      ...
    </div>
  </div>
</div>

.order_position span:after {
    counter-increment: myCounter 1;
    content: counter(myCounter) ")";
    text-align: center;
    margin: 5px 10px;
}

$(function () {

//перемещение блоков по нажитию
    $('.nav__triangle-up').click(function () {
        var $currBlock = $(this).closest('.order__wrap');
        var $prevBlock = $currBlock.prev('.order__wrap');

        if (!$prevBlock.length) return;

        var $currPos = $currBlock.find('.order_position');
        var $prevPos = $prevBlock.find('.order_position');

        var $currPosNum = $currPos.find('[id^=position]').detach();
        var $prevPosNum = $prevPos.find('[id^=position]').detach();

        $prevBlock.before($currBlock);

        $currPos.append($prevPosNum);
        $prevPos.append($currPosNum);


// запись в localStorage

         $('.order_position').each(function(index){    
        var key ='position_order'+ index;
        var value = $(this).val();
       localStorage.setItem(key , value );
    });
    });

[рони]

Aruta,
jQuery UI Sortable сохранение порядка сортировки при перезагрузке

[Aruta]

Aruta,
jQuery UI Sortable сохранение порядка сортировки при перезагрузке

Не подходит. У меня по нажатию на кнопку блок меняет позицию и не получается адаптировать ваш код

Этим кодом у меня происходит нумерация строк

function load(count) {
  const $items = $('.order__wrap');
  $items.filter('.order__wrap').slice(0, count).fadeIn();
  const visible = $items.filter('.order__wrap').length;
  $('.exist').text(visible);
}
load();

И по факту при смене позиции строки .order__wrap нумерация не меняется, но нужно, чтобы позиция запоминалась.
А она не запоминается. Ваш код пробовал - он работает, но только в контексте переноса строки мышью, а не по клику + как только делаешь большую структуру - как у меня. Сразу всё ломается и только перемещение позиции без сохранения работает