AJAX обновляет только один экземпляр модели django

У меня есть проект django, который показывает список объектов "issue", и каждый объект issue имеет булево поле под названием "fixed". Я хочу, чтобы пользователь мог нажать кнопку, которая изменит "fixed" с помощью ajax, но кнопка изменит только один из объектов issue, а не тот "issue", к которому принадлежит эта кнопка. проблема

Вот мой html:

{% for issue in projects.issues.all %}
    <article class="media content-section">
        <img class="rounded-circle article-img" src="{{ issue.author.profile.image.url }}">
        <div class="media-body">
            <div class="article-metadata">
                <a class="mr-2">{{ issue.author }}</a>
                <small class="text-muted">{{ issue.date_posted|date:"F d, Y" }}</small>
            </div>
            <h2><a class="article-title" href="{% url 'issue-detail' issue.id %}">{{ issue.title }}</a></h2>
            <p class="article-content">{{ issue.description }}</p>
            <p>{{ issue.severity }}</p>
            {% if projects.author == user %}
              
              <span id="fixed_bool">{{ issue.fixed }}</span>
              
              {% csrf_token %}
              <button class = "btn btn-primary btn-sm" id="fix-button" value = "{{ issue.id }}">Fix</button>

            {% endif %}
        </div>
    </article>
{% endfor %}

Javascript:

$(document).on('click', '#fix-button', function (e) {
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: '{% url "fix_issue" %}',
      data: {
        issueid: $('#fix-button').val(),
        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
        action: 'post'
      },
      success: function (json) {
        document.getElementById("fixed_bool").innerHTML = json['result']
        console.log(json)
      },
      error: function (xhr, errmsg, err) {

      }
    });
  })

my url

path('fix/', views.FixView, name='fix_issue'),

и мои взгляды

def FixView(request):
if request.POST.get('action') == 'post':
    result = ''
    id = int(request.POST.get('issueid'))
    issue = get_object_or_404(Issue, id=id)
    if issue.fixed == False:
        issue.fixed = True
        result = str(issue.fixed)
        issue.save()
    else:
        issue.fixed = False
        result = str(issue.fixed)
        issue.save()

    return JsonResponse({'result': result, })

Любая помощь будет высоко оценена. Спасибо!!!

Атрибут id в HTML должен быть уникальным.

Но у каждой кнопки один и тот же id: id="fix-button".

Поэтому в вашем JS-коде this-$('#fix-button').val()- возвращает всегда значение первой кнопки.

Чтобы исправить это, либо создайте уникальные идентификаторы для каждой кнопки, либо используйте классы:

<button class="fix-button">...</button>

В коде JS выберите кнопки по имени класса:

$(document).on('click', '.fix-button', function (e) {
    ...
    issueid: $(this).val(),
}
Вернуться на верх