Django bootstrap modal not showing - html

Question

I am trying to show a modal on a button click, however, after I click on the modal it does not show the modal, I do not know what seems to be the issue since I followed the exact tutorial on bootstrap and W3Schools. Here, is my template:
{% for comment in comments %}
<div class="border-bottom">
<div class="row pt-1 pl-4">
<div class="col-xs">
<img class="img-create-post rounded-circle mr-1" style="width: 2.1rem;height: 2.1rem;" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Profile image">
</div>
<div class="col-xs" style="margin-bottom: 0;">
<span class="text-dark font-size-smaller" href="#" style="font-weight: 500;">{{ comment.name.first_name }}</span>
<span class="text-muted small">•</span>
<a class="text-muted small" href="#">#{{ comment.name.username }}</a>
<span class="text-muted small">•</span>
<span class="text-muted small">{{ comment.get_created_on }}</span>
<p class="font-weight-light pl-1">{{ comment.body }}</p>
</div>
</div>
<div class="d-flex justify-content-between">
<div>
<span class="text-muted small view-replies">view {{ comment.replies.count }} replies <i class="fas fa-caret-down"></i></span>
</div>
<div>
<!-- button to show modal -->
<button class="btn btn-sm small float-right text-muted button-outline-light reply-btn" type="button" data-toggle="modal" data-target="modal-comment-reply">Reply</button>
</div>
</div>
<div class="comment-replies">
{% for reply in comment.replies.all %}
<div class="row pt-1 pl-4">
<div class="col-xs">
<img class="img-create-post rounded-circle mr-1" style="width: 2.1rem;height: 2.1rem;" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Profile image">
</div>
<div class="col-xs" style="margin-bottom: 0;">
<span class="text-dark font-size-smaller" href="#" style="font-weight: 500;">{{ comment.name.first_name }}</span>
<span class="text-muted small">•</span>
<a class="text-muted small" href="#">#{{ comment.name.username }}</a>
<span class="text-muted small">•</span>
<span class="text-muted small">{{ comment.get_created_on }}</span>
<p class="font-weight-light pl-1">{{ comment.body }}</p>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="modal fade" id="modal-comment-reply">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<p class="font-size-smaller">{{ request.user.first_name }} replying to {{ comment.name.username }}</p>
</div>
<div class="modal-body">
<form method="POST" action="{% url 'home:post-detail' post.guid_url %}" class="post-comment-form" style="height: 1rem;">
{% csrf_token %}
<input type="hidden" name="comment_id" value="{{ comment.id }}"/>
{{ form }}
<button class="btn btn-sm small btn-outline-primary ml-1" style="border-radius: 20px;" type="submit">Reply</button>
<button type="button btn-sm small btn-outline-secondary" class="btn btn-secondary" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
{% empty %}
<div class="d-flex justify-content-center">
<p class="font-weight-lighter text-muted">No comments to show</p>
</div>
{% endfor %}
<style>
.view-replies:hover {
cursor: pointer;
text-decoration: underline;
}
</style>
<script>
$(document).ready(function () {
$('.reply-btn').on("click", function () {
$('#modal-comment-reply').modal("show");
});
})
</script>
I have even tried jQuery to open it but it does not seem to open, my other modals work fine I do not know why this does not open.
Thanks for all the help in advance!
EDIT: SOLVED - Typo in jquesry function!