Взаимодействие с текстом в Django для цикла

Question

Я работаю над проектом Django, где я хочу вывести текстовый файл и применить определенные операции, такие как выделение текста. Моя идея состояла в том, чтобы реализовать его таким образом, чтобы можно было щелкнуть каждое слово, чтобы появилось всплывающее окно (или окно всплывающей подсказки), отображающее все параметры.

{% for Line in File.body %}
<div>
    {% for Token in Line %}
      {% if not Token.content == None %}
        <span class="inline token" id="token">
          <strong style="color: {{ Token.highlight }};">
            {{ Token.content }}
          </strong>
        </span>
        <div id="{{ Token.unique_id }}">
          POPUP </br>
          <button onclick="changeColor()">Highlight</button>
        </div>

        <script>
          tippy('.token', {
            content: document.getElementById("{{ Token.unique_id }}"),
            delay: 100,
            arrow: true,
            arrowType: 'round',
            size: 'large',
            duration: 500,
            animation: 'scale',
            allowHTML: true,
            hideOnClick: true,
            trigger: "click"
          })

          function changeColor() {
          var token = document.getElementById("token");
          token.style.color="blue;";

          }
      </script>

      {% endif %}
      {% if Token.endline %}
          </br>
      {% endif %}
    {% endfor %}
</div>

{% endfor %}

Я попытался использовать библиотеку подсказок tippjs ( https://atomiks.github.io/tippyjs/), но нажатие на кнопку выделения ничего не дает. Если я не включу часть javascript в цикл, ничего не произойдет вообще. Код с частью javascript, не входящей в цикл, будет выглядеть примерно так:

<script>
    tippy('.token', {
        content: document.getElementById("{{ Token.unique_id }}"),
        delay: 100,
        arrow: true,
        arrowType: 'round',
        size: 'large',
        duration: 500,
        animation: 'scale',
        allowHTML: true,
        hideOnClick: true,
        trigger: "click"
      })

      function changeColor() {
      var token = document.getElementById("token");
      token.style.color="blue;";
      }
  </script>

{% for Line in File.body %}
<div>
    {% for Token in Line %}
      {% if not Token.content == None %}
        <span class="inline token" id="token">
          <strong style="color: {{ Token.highlight }};">
            {{ Token.content }}
          </strong>
        </span>
        <div id="{{ Token.unique_id }}">
          POPUP </br>
          <button onclick="changeColor()">Highlight</button>
        </div>

      {% endif %}
      {% if Token.endline %}
          </br>
      {% endif %}
    {% endfor %}
</div>

{% endfor %}

Я новичок в django и даже новее в javascript, поэтому я не уверен, что это правильный путь.

Может ли кто-нибудь указать мне правильное направление здесь?