passing multiple id into one ajax function - php

Question

I want to run the same js ajax function on multiples id, so I could return the specific information from my database. Here it did run through "id="test" but it returns them to all of it. How do I make them return to its own "id"
html
<div>
<p class="postbutton" id="test_1" > </p> \\supposed to return 1, but it returns 3//
<p class="postbutton" id="test_2" > </p> \\supposed to return 2, but it returns 3//
<p class="postbutton" id="test_3" > </p> \\supposed to return 3, but it returns 3//
</div>
my scripting function
$(".postbutton").each(function () {
x = $(this).prop('id').replace(/[^\d.]/g, '') // converting it to a set of ID to be passed to my controller
$.ajax({
/* the route pointing to the post function */
url: '/postajax',
type: 'POST',
/* send the csrf-token and the input to the controller, Laravel stuff */
data: {_token: CSRF_TOKEN, message: x},
dataType: 'JSON',
/* remind that 'data' is the response of the AjaxController */
success: function (data)
{
$(" p[id^='test']").html(data.msg);
}
});
});

Answer 1

Use $(this).html() otherwise, for each ajax call, $(" p[id^='test']").html(data.msg) will be call even the last ajax call. So the last call has 3 as answer. So it updates the two first ajax call.
$(".postbutton").each(function () {
var context = this
x = $(context).prop('id').replace(/[^\d.]/g, '') // converting it to a set of ID to be passed to my controller
$.ajax({
/* the route pointing to the post function */
url: '/postajax',
type: 'POST',
/* send the csrf-token and the input to the controller, Laravel stuff */
data: {_token: CSRF_TOKEN, message: x},
dataType: 'JSON',
/* remind that 'data' is the response of the AjaxController */
success: function (data)
{
$(context).html(data.msg);
}
});
});

Answer 2

Since ID is attribute which wont be changes in your case - try replace .prop with .attr() to get the value of ID.
Also matching that you inside success function will return all possible matches - in this case 3
Also it will be good if you use already founded ID for matching element in success function like
$(`#test_${x}`).html(data.msg);

Answer 3

First to store your all id in array.
after pass this array in your ajax function.
like this:-
var id_list=[];
$(".postbutton").each(function () {
x = $(this).prop('id').replace(/[^\d.]/g, '') // converting it to a set of ID to be passed to my controller
id_list.push(x);
});
$.ajax({
/* the route pointing to the post function */
url: '/postajax',
type: 'POST',
/* send the csrf-token and the input to the controller, Laravel stuff */
data: {_token: CSRF_TOKEN, message: id_list},
dataType: 'JSON',
/* remind that 'data' is the response of the AjaxController */
success: function (data)
{
$(" p[id^='test']").html(data.msg);
}
});