I'm working on a project with Django. I have multiple buttons on a page. When clicking one of these buttons I want to get the value of it without the page refreshing.

With the below code it does want I want except that it will only return the value of the first button on the page regardless of which button I click.

Please note that I have zero experience with JS which is why I'm struggling. I've looked at many, many threads and I can't figure it out.

<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())
      },
    }
  })
})