in

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


}})})
{% 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>{{ ingredient.group }}</h2>
            </div>
              <button id="{{ ingredient.pk }}" class="testing" value="{{ ingredient.food_name }}">{{ ingredient.food_name }}</button>
          </div>
        </article>

    {% endfor %}



Source: https://stackoverflow.com/questions/70559268/same-ajax-call-for-multiple-button-on-clicks

Quick Tip: Class Loader Details in Java

Quick Tip: How To Update Last Modified Time in Java