How to get what selected Select is click - php

Question

I have multiple drop down box, it is a result on a loop.
foreach($Transs as $Trans){
<select data-id="'.$Trans->coursetitle.'" name = "Schedule" id = "Schedule" class = "form-control" '.$disabled.'>
<option></option>
</select>
}
Everytime i want to click a select box, it will populate a data from php and display as option in the clicked box.
Here my ajax
<script>
$(document).on("click", "#Schedule", function () {
var subid = $(this).data('id');
var dataString = 'id=' + subid;
$.ajax({
type: "POST",
url: "../class/formschedule.class.php",
data: dataString,
cache: false,
dataType: 'json',
success: function (data) {
var len = data.length;
$("#Schedule").empty();
for( var i = 0; i<len; i++){
var id = data[i]['id'];
var name = data[i]['name'];
$("#Schedule").append("<option value='"+id+"'>"+name+"</option>");
}
}
});
});
</script>
But what happens is that only the first drop down box is populated not what i clicked.

Answer 1

HTML Page must contain unique id. You are giving same id to multiple select that's why only first id event done. Change your id to class then perform action
foreach($Transs as $Trans){
echo '<select data-id="'.$Trans->coursetitle.'" name = "Schedule" class = "form-control Schedule" '.$disabled.'>
<option></option>
</select>';
}
Ajax:
<script>
$(document).on("click", ".Schedule", function () {
var subid = $(this).data('id');
var dataString = 'id=' + subid;
var attr = $(this);
$.ajax({
type: "POST",
url: "../class/formschedule.class.php",
data: dataString,
cache: false,
dataType: 'json',
success: function (data) {
var len = data.length;
$(attr).empty();
for( var i = 0; i<len; i++){
var id = data[i]['id'];
var name = data[i]['name'];
$(attr).append("<option value='"+id+"'>"+name+"</option>");
}
}
});
});
</script>