JavaScript won't run if it includes jinja but will run otherwise

Question

Hello I am running into a problem that seems very simple but I can't find any solution online. Basically I am trying to use flask alongside javascript and using jinja templates to communicate between the two. I have an html file and the jinja template is working to fill out the boxes as I expect however anything in between tags that includes jinja will not run. Any help is much appreciated! The different cases are:

#this will run
<script>alert( 'Hello, 1' );</script>

#this won't
<script>alert( {{TableTitle}} );</script>

#I saw a tutorial that did this but it also won't run
{% block javascript %}
<script>alert( {{TableTitle}} );</script>
{% endblock %}

#when I view the source of the loaded page I see that jinja template has worked and get this:
<script>alert( test_data );</script>

#the ultimate goal is to make this run:
{% block javascript %}
<script>
    alert('hello inside')
    $(document).ready(function () {
        alert( 'Hello, 5' );
        const config = {
            type: 'line',
            data: {
                labels: [],
                datasets: [
                {% for line in lines %}
                
                {
                    label: {{line}},
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [],
                    fill: false,
                }

                {% endfor %}
                
                ],
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: {{TableTitle}}
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Time'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Magnitude'
                        }
                    }]
                }
            }
        };

        const context = document.getElementById('canvas').getContext('2d');

        const lineChart = new Chart(context, config);

        const source = new EventSource("{{url_for('jsplotter')}}");

        source.onmessage = function (event) {
            const data = JSON.parse(event.data);
            if (config.data.labels.length === 20) {
                config.data.labels.shift();
                config.data.datasets[0].data.shift();
            }
            config.data.labels.push(data.time);

            {%for i in range(lines|length)%}

            config.data.datasets[{{i}}].data.push(data.value[{{i}}]);
            {%endfor%}

            lineChart.update();
        }
    });
</script>
{% endblock %}


#which gets transformed into:

<script>
    alert('hello inside')
    $(document).ready(function () {
        alert( 'Hello, 5' );
        const config = {
            type: 'line',
            data: {
                labels: [],
                datasets: [
                
                
                {
                    label: 1V0_REF,
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [],
                    fill: false,
                }

                
                
                {
                    label: 1V35_REF,
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [],
                    fill: false,
                }

                
                
                ],
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: test_data
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Time'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Magnitude'
                        }
                    }]
                }
            }
        };

        const context = document.getElementById('canvas').getContext('2d');

        const lineChart = new Chart(context, config);

        const source = new EventSource("/jsplotter");

        source.onmessage = function (event) {
            const data = JSON.parse(event.data);
            if (config.data.labels.length === 20) {
                config.data.labels.shift();
                config.data.datasets[0].data.shift();
            }
            config.data.labels.push(data.time);

            

            config.data.datasets[0].data.push(data.value[0]);
            

            config.data.datasets[1].data.push(data.value[1]);
            

            lineChart.update();
        }
    });
</script>