<div class="new-horizontal-scroll-bar-container" data-scroll-speed="100">
  <div class="new-horizontal-scroll-bar-content">
    <span>⭐️ T-Shirt優惠 </span>
    <span>⭐️ 熱賣精選 </span>
    <span>⭐️ 限時特賣 </span>
    <span>⭐️ 春日系列 </span>
    <span>⭐️ 熱門好貨 </span>
    <span>⭐️ 我們的服務 </span>
  </div>
</div>

.new-horizontal-scroll-bar-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #222;
  color: #eee;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1px solid #444;
  /* Optional styling */
  font-family: Arial, sans-serif;
  font-size: 18px;
  height: 40px;
  display: flex;
  align-items: center;
}

/* Add some left padding to the scroll content */
.new-horizontal-scroll-bar-content {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  /* Prevent margin collapsing */
  margin: 0;
  /* To align inline elements */
  vertical-align: middle;
  padding-left:100px;
}

/* Spacing between spans */
.new-horizontal-scroll-bar-content span {
  margin-right: 50px;
  display: inline-flex;
  align-items: center;
}

/* Optional icon styling (if you want) */
/* Make emojis or icons slightly bigger */
.new-horizontal-scroll-bar-content span svg,
.new-horizontal-scroll-bar-content span img {
  height: 1em;
  width: auto;
  margin-right: 8px;
}


(function() {
  class NewHorizontalScrollBar {
    constructor(container) {
      this.container = container;
      this.content = container.querySelector('.new-horizontal-scroll-bar-content');

      // Duplicate the content
      this.clone = this.content.cloneNode(true);
      this.clone.setAttribute('aria-hidden', 'true');
      container.appendChild(this.clone);

      this.scrollSpeed = parseFloat(container.getAttribute('data-scroll-speed')) || 100; // px per second

      // Current translateX position
      this.x = 0;

      // Width of original content + its computed left padding, so clone matches position properly
      this.contentWidth = this.content.scrollWidth;

      // Bind animation frame callback
      this.animate = this.animate.bind(this);

      // Pause on hover
      this.isPaused = false;
      //this.container.addEventListener('mouseenter', () => { this.isPaused = true; });
      //this.container.addEventListener('mouseleave', () => { this.isPaused = false; });

      // Start animation
      this.start();
    }

    start() {
      this.lastTimestamp = null;
      requestAnimationFrame(this.animate);
    }

    animate(timestamp) {
      if (!this.lastTimestamp) this.lastTimestamp = timestamp;
      const elapsed = timestamp - this.lastTimestamp;
      this.lastTimestamp = timestamp;

      if (!this.isPaused) {
        this.x -= (this.scrollSpeed * elapsed) / 1000;

        // Reset scroll when fully scrolled by contentWidth, but do it smoothly
        if (this.x <= -this.contentWidth) {
          this.x += this.contentWidth;
        }

        // Apply translateX to original and cloned content
        this.content.style.transform = `translateX(${this.x}px)`;
        this.clone.style.transform = `translateX(${this.x + this.contentWidth}px)`;
      }

      requestAnimationFrame(this.animate);
    }
  }

  document.addEventListener('DOMContentLoaded', () => {
    const containers = document.querySelectorAll('.new-horizontal-scroll-bar-container');
    containers.forEach(container => {
      new NewHorizontalScrollBar(container);
    });
  });
})();


I have the above code to show the auto scroll info bar in website. Please update the code to fulfill following requirements:
1. clone any gone item (scrolled to the left item) and put at the end of content list and then remove the gone item.

please provide the full set of code.