I have an dynamically created array of spans here it is :

    button.onclick = (e) => { 
       e.preventDefault(); 
       str = inputIn.value; 
       inputIn.value = ''; 
}

    for (let i = 0; i < str.length; i++) {
        const span = document.createElement('span'); 
        span.textContent = str[i]; 
        document.body.appendChild(span);
        //--- save old position
        let rect = span.getBoundingClientRect();
        span.setAttribute('oldleft', `${rect.left}px`);
        span.setAttribute('oldtop', `${rect.top}px`);
        // call moving/swapping func
        onClickAndMove(span);`

after that each element has two valueable positions as current, represented by (left,top) and saved from last body.click attributes as(oldleft, olttop). Direct code from console is here :

<span id="0" oldleft="624.71875px" oldtop="166.5px" style="margin: 2px; border: 1px solid rgb(0, 0, 0);">Q</span>
<span id="1" oldleft="631.71875px" oldtop="166.5px" style="margin: 2px; border: 1px solid rgb(0, 0, 0);">W</span>

first click on first element start moving after mouse pointer , second click it got mousepointer onclick position in body. I do the same with the second element. After that all must work as follows : on overflapping elements (one is hoocked to mousepointer and ) on click event they must swap due to rule first not hoocked elem to appiar in (oldleft/oldtop) position of second hoocked the very moment element and second element must take plase the mose pointer position on click. What actually happen is as follows : on swap 0-element with 1-element all works fine they swap as the must. on swap 1-element with 0-element , attributes of 1-element (oldleft/oldtop) are not match real position of 1-element. function for renew old element position is here:

function saveOldLeftTop(char) {
        let rect = char.getBoundingClientRect();
        char.setAttribute('oldleft', `${rect.left}px`);
        char.setAttribute('oldtop', `${rect.top}px`);
      }