Same AJAX call for multiple button on clicks

I’m working on a project with django. I have multiple buttons on a page that I want to, upon clicking, be able to get the value of 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. Please note that I have 0 experience with JS which is why I’m struggling. I’ve looked at many, many threads and I can’t figure it out.

$(document).on('click', '.testing', function (e) {
    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

{% extends "recipe_site/base.html" %}
{% load static %}
{% block content %}
{% block extrascripts %}
    <script type="text/javascript" src="{% static 'ingredients/ingredients.js' %}"></script>
{% endblock extrascripts %}

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

    {% endfor %}


Quick Tip: Class Loader Details in Java

Quick Tip: How To Update Last Modified Time in Java