How to correctly provide a file path in JS xhttp.open()?

Question

I'm trying to change data on a page, without the need to refresh. Using Python/Django/JS

Following this: https://www.freecodecamp.org/news/ajax-tutorial/

I receive the following error when pressing the button to change the text on the page. :

Not Found: /Budgeting/content.txt HTTP/1.1 404

In the above article it says:

The file content.txt should be present in the root directory of the Web Application.

I tried placing it inside of the root directly, but problem still persists and so I tried putting "content.txt" into every single directory of the Web Application. It still is unable to find the file.

Directory structure with content.txt everywhere:

hmtl file with JS:

{% extends "base.html" %}
{% block page_content %}
{% load static %}
   
    <div id="foo">
    <h2>The XMLHttpRequest Object</h2>
    <button type="button" onclick="changeContent()">Change Content</button>
    </div>

    <script>
    function changeContent() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
        document.getElementById("foo").innerHTML =
        this.responseText;
        }
    };
    xhttp.open("GET", "static/content.txt", true);
    xhttp.send();
    }
    </script>
    
{% endblock page_content %}

Also tried:

{% extends "base.html" %}
{% block page_content %}
   
    <div id="foo">
    <h2>The XMLHttpRequest Object</h2>
    <button type="button" onclick="changeContent()">Change Content</button>
    </div>

    <script>
    function changeContent() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
        document.getElementById("foo").innerHTML =
        this.responseText;
        }
    };
    xhttp.open("GET", "content.txt", true);
    xhttp.send();
    }
    </script>
    
{% endblock page_content %}