nodelist.removeChild works only once

I'm trying to make an infinite image slider with limited items. The logic is that - after scrolling when one item has been scrolled past through and is no longer visible on screen, it will be added at the end of list. This way the nodelist will never end. However this only works for first element and instead of remaining in it's place and having a copy at end (making a total of (6+1) items, the first item is removed and placed at the end. Also if you know a better way to do this, please let me know. Application

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
    <script defer src="./script.js"></script>
</head>

<body>
    <div class="project-container">
        <div class="project">1</div>
        <div class="project">2</div>
        <div class="project">3</div>
        <div class="project">4</div>
        <div class="project">5</div>
        <div class="project">6</div>
    </div>
</body>
</html>

JavaScript:

var container = document.querySelector(".project-container")
console.log(container.childNodes[0])


var scrolled = 0;


container.addEventListener("scroll", e => {
    console.log(scrolled)
    if (container.scrollLeft - scrolled >= 395) {
        scrolled += 395;
        nodeItem = container.childNodes[0];
        container.appendChild(nodeItem);
    }
})

CSS:

*, *::before, *::after{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    font-size:100px;
}

.project-container{
    /* display: flex; */
    width:1500px;
    height:400px;
    background-color: rgb(15, 207, 224);
    margin:auto;
    margin-top:60px;
    white-space: nowrap;
    overflow: auto;
}

.project{
    margin:40px;
    display: inline-block;
    height:300px;
    width:350px;
    background-color:white;
}