Несколько бегущий строк при скролле

В общем суть такая , есть длинная бегущая строка , которая при скролле бежит либо влево либо вправо , их может быть на странице не одна , в этом то и вся проблема , почему то все эти строки выбирают длину первой строки , соответственно если в разных строках разное количество символов, получается первая строка работает правильно остальные либо не доезжают до края либо наоборот. У меня есть две реализации , но ни одна не работает правильно https://codepen.io/vertalet76crew/pen/rNNdgLJ .

$(document).ready(function() {
  var element = document.querySelectorAll(".parallaxTxt");
  for (let i = 0; i < element.length; i++) {
    $(element).css({ right: `${-$(window).width()}px` });
  }
  // Получаем нужный элемент
  var visible = function(target) {

    // Все позиции элемента
    var targetPosition = {
        top: window.pageYOffset + target.getBoundingClientRect().top,
        left: window.pageXOffset + target.getBoundingClientRect().left,
        right: window.pageXOffset + target.getBoundingClientRect().right,
        bottom: window.pageYOffset + target.getBoundingClientRect().bottom
      };
      // Получаем позиции окна
      var windowPosition = {
        top: window.pageYOffset,
        left: window.pageXOffset,
        right: window.pageXOffset + document.documentElement.clientWidth,
        bottom: window.pageYOffset + document.documentElement.clientHeight
      };
      console.log(targetPosition,windowPosition )
    if (
      targetPosition.top + $(window).height() * 0.1 >
      windowPosition.bottom - $(target).height()
    ) {
      $(target).css({ right: 0 });
    }
    if (
      targetPosition.bottom - $(target).height() - $(window).height() * 0.1 <
      windowPosition.top
    ) {
      $(".parallaxTxt").css({
        right: `${$(".parallaxTxt_flex > a > p").width() - $(window).width()}px`
      });
    }
    if (
      targetPosition.bottom - $(target).height() - $(window).height() * 0.1 >=
        windowPosition.top &&
      // Если позиция нижней части элемента больше позиции верхней чайти окна, то элемент виден сверху
      targetPosition.top + $(window).height() * 0.1 <=
        windowPosition.bottom - $(target).height()
    ) {
      // Если элемент полностью видно, то запускаем следующий код
      let k =
        ($(".parallaxTxt_flex > a > p").width() - $(window).width()) /
        ($(window).height() * 0.8 - $(".parallaxTxt_flex > a > p").height());
      let resultPx =
        ($(window).height() * 0.9 - target.getBoundingClientRect().bottom) * k;
      $(".parallaxTxt").css({ right: `${resultPx}px` });
    }
  };
  for (let i = 0; i < element.length; i++) {
    // А также запустим функцию сразу. А то вдруг, элемент изначально видно
    visible(element[i]);
  }
  // Запускаем функцию при прокрутке страницы
  window.addEventListener("scroll", function() {
    for (let i = 0; i < element.length; i++) {
      visible(element[i]);
    }
  });
});

Во второй реализации , значение left не приравнивается к 0 при достижении верха страницы, а что самое интересное , оно всегда разное https://codepen.io/vertalet76crew/pen/BaBXdGL Ни в первом ни во втором случае не пойму куда копать.

    let parallaxTxtLink = document.querySelectorAll('.parallaxTxtW .parallaxTxt_link');
    let parallaxTxtW = document.querySelector('.parallaxTxtW');
function scrollString(){
  for( let i = 0; i< parallaxTxtLink.length; i++){
    let stringWidth = parallaxTxtLink[i].offsetWidth - document.body.clientWidth
    let stringTop = parallaxTxtLink[i].getBoundingClientRect().top;
    console.log(parallaxTxtLink[i].getBoundingClientRect().top);
    let viewportHeight = 
        window.innerHeight - parallaxTxtLink[i].getBoundingClientRect().height;
    let shiftElement= stringWidth  / viewportHeight;
    if( stringTop >= 0  && stringTop <= window.innerHeight - parallaxTxtLink[i].getBoundingClientRect().height ){ 
      parallaxTxtLink[i].style.left = (shiftElement * stringTop ) * -1 + 'px';
   }
  }
}
document.addEventListener('scroll' , scrollString)
document.addEventListener('load' , scrollString)