Update values with JS

Hey all!

I have an animation in AE with a bunch of graph bars and charts. The percentage of the bars and charts need me to update later or update based on the situation. I did the animation with Shape Layer and Trim Path animating the End position.
The question is, how can I update the End value without going deep into the JSON file and finding all the values?
I id the layer with #id, but I can change it on the HTML side. I am no developer; I am trying to solve a client problem, so I tried AI help, and it didn’t work.

This is what I got so far; I can go to the .json file and change manually, but with 12 bars to update, it will be a lot of work for each animation.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Lottie Animation Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
    <div id="lottie-animation" style="width: 400px; height: 400px; background-color: #ddd;"></div>
    <button onclick="updateAnimation()">Update Animation</button>

        let anim;

        document.addEventListener("DOMContentLoaded", function() {
            anim = lottie.loadAnimation({
                container: document.getElementById('lottie-animation'),
                renderer: 'svg',
                loop: true,
                autoplay: true,
                path: 'comp1-test.json' // Path to Lottie file

        function updateTrimPathEnd(barId, newEndValue) {
    let elements = anim.renderer.elements;
    for (let i = 0; i < elements.length; i++) {
        if (elements[i].data.nm === barId) {
            let barElement = elements[i];
            let trimPaths = barElement.shapes[0].it.find(item => item.ty === "tm");
            if (trimPaths && trimPaths.e.a === 1) {
                trimPaths.e.k.forEach(keyframe => {
                    keyframe.s = [newEndValue];


function updateAnimation() {
    updateTrimPathEnd("eagle75", 10); // Update layer to %


Thank you so much in advance,