How to make multiple ajax trigger with dynamic id - php

Question

I have written the ajax for the static id. I want to convert it in dynamic id but I don't know how to convert it.
Here id is textbox1, I have textbox1 to textbox10 and rate1 to rate10 it generates dynamically. So how to do it?
$(document).on('change','#textbox1',function () {
var prod_id=$(this).val();
var a=$(this).parent();
console.log(prod_id);
var op="";
$.ajax({
type:'get',
url:'{!!URL::to('search')!!}',
data:{'id':prod_id},
dataType:'json',//return data will be json
success:function(data){
console.log("price");
console.log(data.rate);
// here price is column name in products table data.coln name
a.find('#rate1').val(data.rate);
},
error:function(){}
});
});

Answer 1

Use class instead of id
Generate dynamic textbox with class attribute
<input type="text" name="prod_id" class="_my_textbox">
In js code:
$(document).on('change', '._my_textbox' ,function () {
var prod_id=$(this).val();
var a=$(this).parent();
console.log(prod_id);
var op="";
$.ajax({
type:'get',
url:'{!!URL::to('search')!!}',
data:{'id':prod_id},
dataType:'json',//return data will be json
success:function(data){
console.log("price");
console.log(data.rate);
// here price is column name in products table data.coln name
a.find('#rate1').val(data.rate);
},
error:function(){}
});
});

Answer 2

Since you're using a select element, you could use the onchange prop and asign the function with the ids to it, so you can then use it in your js. The dynamic id would have to come from a PHP script like so:
$stmt = $DBcon->prepare("SELECT txtbx_id, role_id FROM your_table WHERE you_conditions_if_u_have_any");
$stmt->execute();
$row = $stmt->fetchAll();
foreach ($row as $rows) {
$txtbx_id= $rows['txtbx_id'];
$role_id= $rows['role_id'];
echo '
<div class="card">
<select onchange="yourfunction('.$txtbx_id.', '.$role_id.')" >
....
</select>
</div>
';
}
Then in your js, instead of on document change, use the function with the ids as variables like so:
function yourfunction(textbox_id, role_id){
// use the ids which are affected in here
var prod_id=$(this).val();
var a=$(this).parent();
console.log(prod_id);
var op="";
$.ajax({
type:'get',
url:'{!!URL::to('search')!!}',
data:{'id':prod_id},
dataType:'json',//return data will be json
success:function(data){
console.log("price");
console.log(data.rate);
// here price is column name in products table data.coln name
a.find('#rate1').val(data.rate);
},
error:function(){}
});
});