Кнопка вызывает другую, созданную с помощью java script
В настоящее время я работаю над проектом, используя javascript и Django, но столкнулся с проблемой, которая заключается в том, что кнопка входящих, отправленных или архивных писем вызывает нажатие на другие кнопки. EX: когда я нажимаю на кнопку входящих, она показывает мне письма в папке входящих, но если я нажимаю на кнопку "click here", чтобы просмотреть содержимое письма, она не работает, хотя когда я убираю кнопку входящих и нажимаю непосредственно на кнопку "click here", она работает.
в скрипте:
HTML-страница:
{% extends "mail/layout.html" %}
{% load static %}
{% block body %}
<h2>{{ request.user.email }}</h2>
<button class="btn btn-sm btn-outline-primary" id="inbox">Inbox</button>
<button class="btn btn-sm btn-outline-primary" id="compose">Compose</button>
<button class="btn btn-sm btn-outline-primary" id="sent">Sent</button>
<button class="btn btn-sm btn-outline-primary" id="archived">Archived</button>
<a class="btn btn-sm btn-outline-primary" href="{% url 'logout' %}">Log Out</a>
<hr>
<div id="emails-view">
</div>
<div id="compose-view">
<h3>New Email</h3>
<form id="compose-form">
<div class="form-group">
From: <input disabled class="form-control" value="{{ request.user.email }}">
</div>
<div class="form-group">
To: <input id="compose-recipients" class="form-control">
</div>
<div class="form-group">
<input class="form-control" id="compose-subject" placeholder="Subject">
</div>
<textarea class="form-control" id="compose-body" placeholder="Body"></textarea>
<input type="submit" class="btn btn-primary"/>
</form>
</div>
<div id="div2"></div>
{% endblock %}
{% block script %}
<script src="{% static 'mail/inbox.js' %}"></script>
<script></script>
{% endblock %}
Я использую fetch для импорта данных из моделей django. Вот полный проект: https://github.com/mostafamohamed198/CS50W-mail.git
так в чем проблема?