Unable to have multiple SVG text paths animate?

Question

I’m trying to get multiple headings on a homepage to be animated on a svg textPath, each is shown for 3 breakpoints one for Desktop, one for Tablet, one for Mobile. My code loads the headings and they each sit on their own svg curved path.

However, only one heading is animated on scroll, the others are just frozen when I change the breakpoint, I've even tried loading them all on the same page with no media queries and only still one animates and the rest are still.

How do I get each of the headings to be animated on scroll?

I tried changing out the variables like suggested here but not it's working. SVG textPath animation on Scroll multiple times on a page

But not sure why it's not working.

They're all the same code just the variables changed, added a number to each.

Thanks

This is the first heading for Desktop.

  <path id="text-curve" d="M0 100s269.931 86.612 520 0c250.069-86.612 480 0 480 0" fill="none"/>
  
  <text y="40" font-size="3em">
    <textPath id="text-path" href="#text-curve" startOffset="200">
This is a heading</textPath>
  </text>
</svg>

<script>
console.clear();

var textPath = document.querySelector('#text-path');
var textContainer = document.querySelector('#text-container');

var path = document.querySelector( textPath.getAttribute('href') );

var pathLength = path.getTotalLength();
console.log(pathLength);

function updateTextPathOffset(offset){
  textPath.setAttribute('startOffset', offset); 
}

updateTextPathOffset(pathLength);

function onScroll(){
  requestAnimationFrame(function(){
    var rect = textContainer.getBoundingClientRect();
    var scrollPercent = rect.y / window.innerHeight;
    console.log(scrollPercent);
    updateTextPathOffset( scrollPercent * 2 * pathLength );
  });
}

window.addEventListener('scroll',onScroll);

</script>

This is the 2nd heading for Tablet.

<svg id="text-container2" viewBox="0 -300 1000 500" xmlns="http://www.w3.org/2000/svg">
  <path id="text-curve2" d="M0 100s269.931 86.612 520 0c250.069-86.612 480 0 480 0" fill="none"/>
  
  <text y="40" font-size="3em">
    <textPath id="text-path2" href="#text-curve2" startOffset="200">
This is a sub-heading</textPath>
  </text>
</svg>


<script>
console.clear();

var textPath2 = document.querySelector('#text-path2');
var textContainer2 = document.querySelector('#text-container2');

var path = document.querySelector( textPath.getAttribute('href') );

var pathLength = path.getTotalLength();
console.log(pathLength);

function updateTextPathOffset(offset){
  textPath.setAttribute('startOffset', offset); 
}

updateTextPathOffset(pathLength);

function onScroll(){
  requestAnimationFrame(function(){
    var rect = textContainer.getBoundingClientRect();
    var scrollPercent = rect.y / window.innerHeight;
    console.log(scrollPercent);
    updateTextPathOffset( scrollPercent * 2 * pathLength );
  });
}

window.addEventListener('scroll',onScroll);

</script>

This is the 3rd heading for Mobile.

<svg id="text-container3" viewBox="0 -1000 1000 1200" xmlns="http://www.w3.org/2000/svg">
  <path id="text-curve3" d="M0 100s269.931 86.612 520 0c250.069-86.612 480 0 480 0" fill="none"/>
  
  <text y="40" font-size="3em">
    <textPath id="text-path3" href="#text-curve2" startOffset="200">
This is a 3rd heading</textPath>
  </text>
</svg>


<script>
console.clear();

var textPath3 = document.querySelector('#text-path3');
var textContainer3 = document.querySelector('#text-container3');

var path = document.querySelector( textPath.getAttribute('href') );

var pathLength = path.getTotalLength();
console.log(pathLength);

function updateTextPathOffset(offset){
  textPath.setAttribute('startOffset', offset); 
}

updateTextPathOffset(pathLength);

function onScroll(){
  requestAnimationFrame(function(){
    var rect = textContainer.getBoundingClientRect();
    var scrollPercent = rect.y / window.innerHeight;
    console.log(scrollPercent);
    updateTextPathOffset( scrollPercent * 2 * pathLength );
  });
}

window.addEventListener('scroll',onScroll);

</script>