Django Ajax Upvote / Downvote кнопка, где JS находится в замкнутом круге

Question

Вступление:

Предположим, у меня есть приложение типа Quora, где участники могут задавать любые вопросы, а другие могут отвечать на вопросы.И Вопросы, и Ответы могут быть одобрены или понижены.Как в StackOverflow. Пожалуйста, смотрите скриншот ниже

Как вы можете видеть выше, на каждой странице есть 1 вопрос инесколько ответов на этот вопрос.Эта страница предоставлена ​​детальным представлением вопросов в Django.Так что, если я сделаю question.title, он напечатает название вопроса.Теперь для доступа к каждому ответу на этой странице я делаю {% for answer in question.answers.all %} В шаблонах Django.Таким образом, после этого в цикле шаблона, пока я не достигну {% endfor %}, я могу напечатать answer.something и что-то напечатает на странице

Проблема:

У меня есть Вопрос upvote/downvote и Ответ upvote/downvote на одной и той же странице. JS для сценария Вопроса upvote/downvote отлично работает. Однако Ответ upvote/downvote, который находится внутри forloop, не является.Если я нажму «Ответить на голосование один раз», то console.log покажет, что я нажал 2 раза.Я нажимаю на него 2 раза. console.log показывает, что я нажал 6 раз. Иногда console.log показывает, что я нажимал на него 27 раз.Но я нажал на ответ upvote/downvote только один раз.Также The Response upvote/downvote не отвечают на их индивидуальные ответы.Я нажимаю второй ответ и 1-й ответ upvote/downvote отвечает

Код: отображается только ответ upvote

Шаблон: Объяснение кода ниже: Когда пользователь нажимает Answer Upvote Button.Сначала проверяет, есть ли у пользователя ответ Downvoted.Если ответ уже Downvoted, пользователь отнимает отрицательный ответ. Таким образом, один пользователь не повышает и не понижает один и тот же ответ.Если этот ответ не имеет Upvote или Downvote, то он Upvotes ответ

{% for answer in question.answers.all %}
<div>

    {% if user not in answer.ansup.all and user in answer.ansdown.all  %}
        <form action="{% url 'questions:ansdown' username=answer.author.username pk=answer.pk %}" method="post" >
            {% csrf_token %}
            <button type="submit" style="margin-left:-13px;" name="answer_pk" value="{{ answer.pk }}"
                    class="btn btn-link ans_downvote_button" >
                <img class="answer_up" src="{% static 'images/Upvote_blank.png' %}" height="25px">
            </button>
        </form>
    {% elif user in answer.ansup.all %}
        <form action="{% url 'questions:ansup' username=answer.author.username pk=answer.pk %}" method="post" >
            {% csrf_token %}
            <button type="submit" style="margin-left:-13px;" name="answer_pk" value="{{ answer.pk }}"
                    class="btn btn-link ans_upvote_button">
                <img class="answer_up" src="{% static 'images/Upvote.png' %}" height="25px">
            </button>
        </form>
    {% else %}
        <form action="{% url 'questions:ansup' username=answer.author.username pk=answer.pk %}" method="post" >
            {% csrf_token %}
            <button type="submit" style="margin-left:-13px;" name="answer_pk" value="{{ answer.pk }}"
                    class="btn btn-link ans_upvote_button">
                <img class="answer_up" src="{% static 'images/Upvote_blank.png' %}" height="25px">
            </button>
        </form>
    {% endif %}




</div>
<div style="margin-left:5px;">{{answer.ansup.count}}</div>
{% endfor %}

Ниже JS, который находится в forloop Объяснение кода: Этот код имеетточно такая же логика, как в шаблоне.Прочитайте объяснение кода шаблона выше.Я знаю, что запускаю логику дважды.Но почему-то логика шаблона не работает в скрипте и наоборот

<script>
        $(document).ready(function () {
                $(document).on('click', ".ans_upvote_button", function( event ){
                event.preventDefault();
                if ($(".answer_down").attr("src") === "{% static 'images/Downvote.png' %}") {
                    var ifPk = $(this).attr("value");
                    console.log(ifPk);
                    var downVote = $("#answer_downvote_section");
                    console.log(downVote);
                    $.ajax({
                        url : "{{answer.get_ansdown_url}}",
                        type: "POST",
                        data: { "pk": ifPk, "csrfmiddlewaretoken": "{{ csrf_token }}"},
                        dataType: "json",
                        success: function (data) {
                            downVote.html(data["form"]);
                        }, error: function (rs, e) {
                            console.log(rs, e);
                        }
                })
                }else{
                var pk = $(this).attr("value");
                console.log(pk);
                var upVote = $("#answer_upvote_section");
                console.log(upVote);
                $.ajax({
                    url : "{{answer.get_ansup_url}}",
                    type: "POST",
                    data: { "pk": pk, "csrfmiddlewaretoken": "{{ csrf_token }}"},
                    dataType: "json",
                    success: function (data) {
                        upVote.html(data["form"]);
                    }, error: function (rs, e) {
                        console.log(rs, e);
                    }
                })
            }
            })

        })

    </script>

Что я делаю не так