Один и тот же вызов AJAX для нескольких нажатий на кнопку на одной странице [дубликат]

Я работаю над проектом с Django. У меня есть несколько кнопок на странице. При нажатии на одну из этих кнопок я хочу получить ее значение без обновления страницы.

Нижеприведенный код делает то, что я хочу, за исключением того, что он возвращает значение только первой кнопки на странице, независимо от того, какую кнопку я нажимаю.

Пожалуйста, обратите внимание, что у меня нет опыта работы с JS, поэтому я испытываю трудности. Я просмотрел много, много тем и не могу понять это.

<article class="media content-section">
  <div class="media-body">
    <div class="article-metadata">
      <h2>{{ ingredient.group }}</h2>
    </div>
    <button id="{{ ingredient.pk }}" class="testing" value="{{ ingredient.food_name }}">{{ ingredient.food_name }}</button>
  </div>
</article>

$(document).on('click', '.testing', function(e) {
  e.preventDefault();

  $.ajax({
    type: 'POST',
    url: '{% url "select" %}',
    data: {
      value: $('.testing').val(),
      csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
      // action: 'post',
      success: function(json) {
        console.log("success"); // another sanity check
        console.log($('.testing').val())
      },
    }
  })
})

Вернуться на верх