semantic uiを使ったポップアップメニューが動作しない

前提・実現したいこと

python + djangoにてWEBアプリ開発をしています。
当方初心者で調べながら作成していく中でsemantic uiの存在を知り、取り入れてみようと思いました。
しかし、cssやjs等の知識がほとんどない状態でコードを書き写したものの動作しないうえエラーも出ないため困っています。

発生している問題・エラーメッセージ

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
          crossorigin="anonymous">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!--Custom css ADD HERE-->

    <!-- semantic UI -->
    <link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <title>Breeze!!</title>
</head>
...

該当のソースコード

{% extends 'account/base.html' %}
{% load static %}

{% block contents %}
<!--modal-->
<div class="ui basic modal" style="top:200px; height:400px">
  <div class="ui icon header">
    <i class="user plus icon"></i>
    {{object}}をフォローしますか
  </div>
  <div class="content">
    <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
  </div>
  <div class="actions">
      <form action="{% url 'account:follow-unfollow-view' %}" method="post">
          {% csrf_token %}
          <input type="hidden" name="prfile_pk" value={{object.pk}}>
            <button type="submit" class="ui green ok massive button">
            <i class="checkmark icon"></i>
            Yes
            </button>
          </form>
  </div>
</div>

<div class="ui grid">
    <div class="row">
        <div class="four wide column">
        {{object}}
            <hr>
            {% if follow %}
            <form action="{% url 'account:follow-unfollow-view' %}" method="POST">
                {% csrf_token %}
                <input type="hidden" name="profile_pk" value={{object.pk}}>
                <button type="submit" class="ui negative button">unffolow</button>
            </form>
            {% else %}
                <button id="follow-btn" class="ui positive button">follow</button>
            {% endif %}
        </div>
        <div class="twelve wide column">
            {% for post in object.profiles_posts %}
                <div class="ui segment">
                    {{post.location}}
                </div>
            {% endfor %}
        </div>
    </div>
</div>


{{ object }}
{{follow}}

{% if request.user == profile.user %}
<form action="{% url 'account:update' profile.id %}">
    <button type="submit" class="btn btn-success slide">edit  <i class="fa fa-caret-right"></i> </button>
</form>
{% endif %}
{% endblock contents %}

{% block scripts %}
<script>
$(document).ready(function(){
    $('#follow-btn').click(function(){
        $('.ui.basic.modal')
        .modal('show')
    })
;
})

</script>
{% endblock scripts %}

試したこと

コードはユーザーがフォローをするときに確認のためのポップアップメニューが表示される動作を記述しています。
フォローを外すときはポップアップが出ないのでうまく動作しました。

環境

前提・実現したいこと

base.html

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
          crossorigin="anonymous">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!--Custom css ADD HERE-->

    <!-- semantic UI -->
    <link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <title>Breeze!!</title>
</head>
...

profile_detail.html

{% extends 'account/base.html' %}
{% load static %}

{% block contents %}
<!--modal-->
<div class="ui basic modal" style="top:200px; height:400px">
  <div class="ui icon header">
    <i class="user plus icon"></i>
    {{object}}をフォローしますか
  </div>
  <div class="content">
    <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
  </div>
  <div class="actions">
      <form action="{% url 'account:follow-unfollow-view' %}" method="post">
          {% csrf_token %}
          <input type="hidden" name="prfile_pk" value={{object.pk}}>
            <button type="submit" class="ui green ok massive button">
            <i class="checkmark icon"></i>
            Yes
            </button>
          </form>
  </div>
</div>

<div class="ui grid">
    <div class="row">
        <div class="four wide column">
        {{object}}
            <hr>
            {% if follow %}
            <form action="{% url 'account:follow-unfollow-view' %}" method="POST">
                {% csrf_token %}
                <input type="hidden" name="profile_pk" value={{object.pk}}>
                <button type="submit" class="ui negative button">unffolow</button>
            </form>
            {% else %}
                <button id="follow-btn" class="ui positive button">follow</button>
            {% endif %}
        </div>
        <div class="twelve wide column">
            {% for post in object.profiles_posts %}
                <div class="ui segment">
                    {{post.location}}
                </div>
            {% endfor %}
        </div>
    </div>
</div>


{{ object }}
{{follow}}

{% if request.user == profile.user %}
<form action="{% url 'account:update' profile.id %}">
    <button type="submit" class="btn btn-success slide">edit  <i class="fa fa-caret-right"></i> </button>
</form>
{% endif %}
{% endblock contents %}

{% block scripts %}
<script>
$(document).ready(function(){
    $('#follow-btn').click(function(){
        $('.ui.basic.modal')
        .modal('show')
    })
;
})

</script>
{% endblock scripts %}