Jinga used to automate adding HTML elements

I have asked this question a few times and sorry to be annoying but I have added a bit more info so that you can hopefully help.

I have a database table called "country" with fields: country_code and country_name. e.g. country_code = AF country_name = Afghanistan I will need to make a drop-down with all the countries and add it to the HTML. Instead of adding the radio buttons manually, I want to try and do it using jinga. This is what the model of the country table looks like in sqlalchemy:

class Country(db.Model):
country_code = db.Column(db.String(3), primary_key=True)
country_name = db.Column(db.String(150), unique=True)

With the below code, It is supposed to get the country name and set label as the countries name and then the id= to the country code and the for= to the country code as well. I'm not getting any errors, but it hasn't added any countries to the coutries drop down menu. I might not be understanding this correctly but jinga can do this right? I may be missing something so I have attached the javascript behind opening and closing the drop down.

{% extends "base.html" %} {% block title %}Your Countries{% endblock %}
{% block countriespage %}
<div class="container pt-5">
  <h1 align="center">Your <b class="text-primary">Countries</b></h1>
</div>


<div class="container select-box pt-5">
   <div class="options-container active">
     <div class="option" id="optionSelected">
        <input type="radio" class="radio" id="AF" name="countries"/>
        <label for="AF">Afghanistan</label>
    </div>
    {% for country in country %}
        <!-- {{ country }} to check what a country is but it does not print anything... -->
        <div class="option">
                <input type="radio" class="radio" id="{{ country.country_code }}" name="countries"/>
                <label for="{{ country.country_code }}">{{ country.name }}</label>
        </div>
    {% endfor %}

    <div class="option">
        <input type="radio" class="radio" id="AL" name="countries" />
        <label for="AL">Albania</label>
    </div>

Javascript:

const selected = document.querySelector(".selected");
const optionsContainer = document.querySelector(".options-container");

const optionsList = document.querySelectorAll(".option");

// When clicked...
selected.addEventListener("click", () => {
  // it will toggle the countries dropdown by adding the class 'active' to it
  optionsContainer.classList.toggle("active");
});

// For each element in the list referencing every element with variable 'o'
optionsList.forEach(o => {
  // adds an event listener for when each element ('o') is clicked
    o.addEventListener("click", () => {
        // changes the element which has 'selected' to have the label of the clicked element (i.e. changes the top part of select box to clicked country)
        selected.innerHTML = o.querySelector("label").innerHTML;
        // closes the dropdown
        optionsContainer.classList.remove("active");
    });
});

I have a notes page which reads the notes a user has from sql and uses a for loop with jinga to show the notes. This is what the note code for adding the notes to the page is:

<h1 align="center">Notes</h1>
<ul class="list-group list-group-flush" id="notes">
{% for note in user.notes %}
<!-- Each note has the elements below: -->
<li class="list-group-item">{{ note.data }}
    <!-- OnClick will run a javascript called deleteNote and send the current node (note.id - known as it's in a for loop with 'li' -->
    <!-- Adapted  to jQuery so the class deleteNoteButton will be detected by note.js and use the 'note-id=' to add it the server? -->
    <button type="button" note-id={{ note.id }} class="close deleteNoteButton">
        <span aria-hidden="true">&times;</span>
    </button>
</li>
{% endfor %}

I've tried many things but I'm not sure what's going wrong. Any help would be appreciated. Thanks