I’m getting “jinja2.exceptions.TemplateSyntaxError: unexpected char ‘$’ at 3607” error while trying to render html using js and data from python

I’m trying to use data retrieved by my python get_data() api to create dynamic urls. The data is a dictionary which states whether or not a user owns a specific course. If they own the course (Ex. ‘ownsJava’ : True), then the button called ‘Learn’ will go to that course, if they dont own it (Ex. ‘ownsJava’ : False), then the button will be called ‘Purchase’ and will redirect to the shopping cart. However, to do this I need to include javascript variables into {{ url_for() }} so it will work properly, but I keep on getting this error: jinja2.exceptions.TemplateSyntaxError: unexpected char ‘$’ at 3607 at .

I tried to separate the functions (one function for fetching data and one for rendering the content) but it just ended in the same thing.

script in userdash.html

<script type="text/javascript">
      render_data.innerHTML = ``;
      const user_id = "{{ user_id }}";

      const url = `/get_data/${user_id}`
      
      function getPurchasing(key){
        if (key === 'pythonOwner'){
          return 'python';
        }
        else if(key === 'javascriptOwner'){
          return 'javascript';
        }
        else{
          return 'java';
        }
      }

      function getCourse(key){
        if(key === 'ownsJava'){
          return 'javacourse';
        }
        else if(key === 'ownsJavascript'){
          return 'javascriptcourse';
        }
        else{
          return 'pythoncourse';
        }
      }


      async function fetchAndRenderData() {
        try {
          const response = await fetch(url);
          if(!response.ok){
            throw new Error('Network response was not ok');
          }
          data = await response.json();  // Convert response to JSON
          // console.log(1);
          // console.log(data);
          // console.log(2);

        } catch (error) {
            console.error('Error:', error);
        }
        console.log(data);
        // return data;

        let user_url;
        let buttonText;
          for(const [key, values] of Object.entries(data)){
            
            if(values){
              user_url = `${user_id}/${getCourse(key)}`;
              buttonText = 'Learn';
            }
            else{
              user_url = `shoppingcart`;
              buttonText = 'Purchase';
            }
            render_data.innerHTML += 

            `<div class="cardBorder item">
                <div>
                  <img src="{{ url_for('static', filename='img/prof1.jpg') }}">
                </div>
                <div>
                  <h1>test</h1>
                  <h2>test</h2>
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias esse culpa rerum, voluptate nisi ea dignissimos consequuntur ipsam ratione iusto nobis voluptatum maxime. Repudiandae, illum voluptate? Dolores, culpa accusantium asperiores ex, sint quia, nam ad animi accusamus ipsa molestiae quidem!</p>
                </div>
                <div class="purchaseButton">
                  <a href="{{ url_for(${user_url}) }}">
                    <button>
                        ${buttonText}
                    </button>
                  </a>
                </div>
            </div>`

      }
    }
fetchAndRenderData();
</script>

console.log(data);

ownsJava : false,
ownsJavascript : false,
ownsPython : false

app.py get_data():

@app.route('/get_data/<user_id>', methods=['GET'])
def get_data(user_id):
    user = load_user(user_id)
    if user is None:
        return jsonify({"error": "User not found"}), 404
    
    user_data = {
        "ownsPython": user.pythonOwner,
        "ownsJava": user.javaOwner,
        "ownsJavascript": user.javascriptOwner
    }
    extra = request.args.get("extra")
    if extra:
        user_data["extra"] = extra
    return jsonify(user_data)