The two list are A, and B. The list B is sortable (drag-drop), each item in list 'B' is related with each item in list 'A' by index ! we set first this css propety to list 'B' items

#sortable2 li:nth-child(1) {
  z-index: 10!important;
  background-color: rgb(149, 168, 228);

}

#sortable2 li:nth-child(2) {
  z-index: 9!important;
  background-color: rgb(69, 223, 31);

}

#sortable2 li:nth-child(3) {
  z-index: 8!important;
  background-color: rgb(230, 47, 123);

}  ```

when the page is loaded, it dynamically give z-index of each item in List 'B' to each item in List 'A'; like this:

List B: #sortable2 li List A:#textSegments .jmSeg

for(var i=0;i<=$('#sortable2 li').length; i++){
    
        console.log($('#sortable2 li').eq(i).css('z-index'));
        $('#textSegments .jmSeg').eq(i).css('z-index',$('#sortable2 li').eq(i).css('z-index'));
    }

my question is after resort List 'B' items the z-index values in list 'B' change depending on the position of the item(layer). The "top item" of list 'B' set the highest z-index value and the last item gets the lowest z-index value , but z-index of List 'A' no changes. i tried this code below code to update list A z-index but also no changes

 $('#sortable2').sortable({ ........
.....................................
 update: function (event, ui) {
        
        for(var i=0;i<=$('#sortable2 li').length; i++){
    
                    console.log($('#sortable2 li:nth-child('+i+')').css('z-index'));
                    $('#textSegments .jmSeg').eq(i).css('z-index',$('#sortable2 li:nth-child('+i+')').css('z-index'));
                }

  [1]: https://i.stack.imgur.com/4hXad.jpg