swap HTML elements but keep original IDs - JS

Question

im trying to swap 2 HTML elements but they need to keep their original IDs.
I got a table and each cell have ID = "ixjcell", and each cell have a child div with matching id "ixj"(without the "cell" part);
My thinking is: first swap the elements, then swap back the IDs... sounds simple but cant get it working for some reason. i used the next code (which i got from here) to swap between 2 elements

function swapElementsObj(obj1, obj2) {
    // create marker element and insert it where obj1 is
    var temp = document.createElement("div");

    obj1.parentNode.insertBefore(temp, obj1);
    // move obj1 to right before obj2
    obj2.parentNode.insertBefore(obj1, obj2);

    // move obj2 to right before where obj1 used to be
    temp.parentNode.insertBefore(obj2, temp);

    // remove temporary marker node
    temp.parentNode.removeChild(temp);

    var obj1ID = obj1.getAttribute('id');
    var obj2ID = obj2.getAttribute('id');
    var obj1Childid = obj1ID.replace('cell', '');
    var obj2Childid = obj2ID.replace('cell', '');
    var obj1Child = document.getElementById(obj1Childid);
    var obj2Child = document.getElementById(obj2Childid);

    document.getElementById(obj2Childid).setAttribute('id', obj1Childid);
    document.getElementById(obj1Childid).setAttribute('id', obj2Childid);


    obj1.setAttribute('id', obj2.getAttribute('id'));
    obj2.setAttribute('id', obj1ID);
}

its a board game and i need to rotate one of the board so im using transpose + reverse columns/row and its working... kind of, the problem is the ID's getting mixed up and then the rotation is not working properly.
the elements do swap! and i see the pawns on the board swapping correctly but something is worng with swapping the ID's back and i cant get it right.
Cant use JQuery. thanks in advance!

the elements look like this:

<td>
<span class="boardSingleSpot" id="1x1cell">
<div id="1x1" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true">
</div>
</span>
</td>

this is small example:

edit:(more info):
i have a board which i drag pawns (black/white) to it and drop - the pawn, upon drop is appended as child to the div with class = droparea.
then i have to rotate, when i rotate i have to move the pawn to his proper place, in the example above the pawn is on square 1x1 and after clockwise rotation it will be on 1x2, so i need to swap the content of cell 1x1 and cell 1x2.

HTML wanted result:
from this:

<td>
<span class="boardSingleSpot" id="1x1cell">
<div id="1x1" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true">
<div id="player1" draggable="true" ondragstart="drag_start(event);" ondragend="drag_end(event);" data-droppable="false">
</div>
</span>
</td>

<td>
<span class="boardSingleSpot" id="1x2cell">
<div id="1x2" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true">
</div>
</span>
</td>

to this:

<td>
<span class="boardSingleSpot" id="1x1cell">
<div id="1x1" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true">
</div>
</span>
</td>   

<td>
<span class="boardSingleSpot" id="1x2cell">
<div id="1x2" class="dropArea" draggable="false" ondragenter="drag_enter(event);" ondrop="drag_drop(event);" ondragover="return false" ondragleave="drag_leave(event);" data-droppable="true">
<div id="player1" draggable="true" ondragstart="drag_start(event);" ondragend="drag_end(event);" data-droppable="false">
</div>
</span>
</td>

Answer 1

Replace

document.getElementById(obj2Childid).setAttribute('id', obj1Childid);
document.getElementById(obj1Childid).setAttribute('id', obj2Childid);

with

obj2Child.setAttribute('id', obj1Childid);
obj1Child.setAttribute('id', obj2Childid);