I am making a web application using flask and I am having issues solving a very specific problem.

In one of the pages, I am trying to use javascript in order to dynamically change part of the page to show different content. My problem is, that the new content I am trying to display resides in a different html file and I am trying to displaying using the jinja include template method. This is however not working as it is simply being recognized as text.

Some code to better showcase the issue: When Initially loading the page, the div that has the content that I want updated looks like this:

<div id="graph-div">
    {% include "test_performance.html" %}
</div> 

and my javascript looks like this:

selection =  document.getElementById('category');

if (selection.value === 'Overall Tests & Failures') {
    document.getElementById('graph-div').innerHTML = '{% include "test_failures.html" %}';
} else {
    document.getElementById('graph-div').innerHTML = '{% include "test_failures.html" %}';
}

When initially loading the page, the content renders successfully, however after running the script, the following happens:

Does anyone have any idea if doing what I am trying is actually possible (and how) or whether I need to approach this differently?

I have done some research and the only relevant post I found was this however, the solution marked as correct did not work for me.

Thanks, George