each element appearing one time from each list

I am displaying 2 images side by side. I am trying to randomly sort 2 lists, when each item in the list one has been displayed it moves on to display each item in the second list. Both lists are identical, and I have chosen this way to ensure the same image is not displayed side by side. However, it is randomly not displaying 2 images twice, but all others are displayed twice.

Wondering what is the issue here? I have tried to look everything up but cannot find help anywhere

function start2AFC() {
    var answers = {};
    window.sessionStorage.setItem("answers", JSON.stringify(answers))

    var myImages = new Array();
    var testImages = new Array();

    testImages = ["images/images/practice/practice1.jpg","images/images/practice/practice2.jpg","images/images/practice/practice3.jpg", "images/images/practice/practice4.jpg"];

    var myImages = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg",
    "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg","images/images/icon12.jpg", "images/images/icon13.jpg", 
    "images/images/icon14.jpg", "images/images/icon15.jpg","images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg",
    "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg","images/images/icon24.jpg", "images/images/icon25.jpg", 
    "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg",
    "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]

    var secondImages = ["images/images/icon1.jpg", "images/images/icon2.jpg", "images/images/icon3.jpg", "images/images/icon4.jpg", "images/images/icon5.jpg", "images/images/icon6.jpg", "images/images/icon7.jpg",
    "images/images/icon8.jpg", "images/images/icon9.jpg", "images/images/icon10.jpg", "images/images/icon11.jpg","images/images/icon12.jpg", "images/images/icon13.jpg", 
    "images/images/icon14.jpg", "images/images/icon15.jpg","images/images/icon16.jpg", "images/images/icon17.jpg", "images/images/icon18.jpg", "images/images/icon19.jpg",
    "images/images/icon20.jpg", "images/images/icon21.jpg", "images/images/icon22.jpg", "images/images/icon23.jpg","images/images/icon24.jpg", "images/images/icon25.jpg", 
    "images/images/icon26.jpg", "images/images/icon27.jpg", "images/images/icon28.jpg", "images/images/icon29.jpg", "images/images/icon30.jpg", "images/images/icon31.jpg", "images/images/icon32.jpg", "images/images/icon33.jpg", "images/images/icon34.jpg",
    "images/images/icon35.jpg", "images/images/icon36.jpg", "images/images/icon37.jpg", "images/images/icon38.jpg", "images/images/icon39.jpg", "images/images/icon40.jpg"]

    window.sessionStorage.setItem("practiceImages", JSON.stringify(testImages))
    window.sessionStorage.setItem("images", JSON.stringify(myImages))
    window.sessionStorage.setItem("images_2", JSON.stringify(secondImages))


var counter = 0;
window.sessionStorage.setItem("counter", counter);

count = 1;
document.getElementById("counter").innerHTML = "You are on image " + count + " of 45"
random2AFC();



}



// picks random image from array of image files to be displayed
function random2AFC() {
var practiceImages = JSON.parse(window.sessionStorage.getItem("practiceImages"));
var image = document.getElementById("image");
var images = JSON.parse(window.sessionStorage.getItem("images"));
var images_2 = JSON.parse(window.sessionStorage.getItem("images_2"))


practiceImagesSort = practiceImages.sort(() => Math.random() - 0.5);
document.getElementById("counter").innerHTML = "Trial " + count + " of 45";

imagesSort = images.sort(() => Math.random() - 0.5);
images2Sort = images_2.sort(() => Math.random() - 0.5);

a = 0;
b = 1;
// iterate through practice array 
if (practiceImages.length > 0) {
    image.src = practiceImagesSort[a];
    image2.src = practiceImagesSort[b];
    practiceImagesSort.splice(0, 2);
    count = count + 1;
    window.sessionStorage.setItem("practiceImages", JSON.stringify(practiceImages));
    
} else {
    // after every 13 images, display break image not including practice
    if (count % 13 == 0) {
        image.src = "images/images/break_2afc.png"
        image2.src = "images/images/break_2afc2.png"
        count = count  + 1
    } else { 
    // once every image has been displayed from both arrays, send to the database
   if (images.length == 0 ) {
       if (images_2.length == 0) { 
            send2AFC();
        } 
        else {
            image.src = images2Sort[a]
            image2.src = images2Sort[b];
            count = count + 1
            images2Sort.splice(0,2)
        } 
    } else { 

        image.src = imagesSort[a]
        image2.src = imagesSort[b]
        imagesSort.splice(0,2)
        count = count + 1;
        }
    }
        window.sessionStorage.setItem("images", JSON.stringify(images))
        window.sessionStorage.setItem("images_2", JSON.stringify(images_2))
    }
}

<!DOCTYPE html>

<html>

<head>
    <title> Alternate Force Choice </title>
    <link rel="stylesheet" type="text/css" href="css/mainstyle.css">
</head>


<body class=body onload="start2AFC()">
    <div>
        <div>
            

                <h1> Which app icon is more beautiful?</h1>
                <br>

            <hr>
            <div class=imageContainer>
                <div class=image>
                    <img onclick="store2AFC(this.id)" id="image" alt="Experimental Image" width="400px" height="200px">
                </div>

                <div class=image>
                    <img onclick="store2AFC(this.id)" type="image" id="image2" alt="Experiment Image" width="400px" height="00px">
                </div>
            </div>
        </div>

        <hr>
        <br>


            <div class=counter id=counter>
            </div>

        </div> 

        <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

from each element appearing one time from each list