<input type=button> column is created in each row. Id attribute is assumed to be okay to use. Documentation has said that in a handler the selector ':button' will work for both <input type=button>
and <button>. The table with INPUT tags having values of record number is created. But clicking on a choice does not respond using these dynamically created columns and it appears that event delegation is being thwarted somewhere.
$(document).ready(function() {
$('#studentlist').on('change','#selectstudents',function() {
$.getJSON(
'SessionStudent.php',
{ 'id': $(this).val() },
function(data) {
var inA = "<input type='button' id='";
var inB = "' value='Status' />";
var rpt = '<table><thead><tr>';
rpt += '<th>Course</th>';
rpt += '<th>State</th>';
rpt += '</tr></thead><tbody>';
$.each(data, function(key, obj) {
rpt += '<tr><td align="center">' + obj.crsnum + '</td>';
rpt += '<td align="center">' + inA + obj.recnum + inB + '</td></tr>';
}); // end each
rpt += '</tbody></table>';
$('#report').html(rpt);
} // end data
); // end json
}); // end change
$('table tbody').on('click','tr :button',function() {
alert("id=" + $(this).attr('id'));
}); // end click
}); // end ready
</script>
</head>
<body>
<?php
require ('/scripts/school_connect.php');
$sql = "SELECT userid, user FROM student";
if ($result = $dbc->query($sql)) {
if ($result->num_rows > 0) {
?>
<p id="studentlist">Select a student
<select id="selectstudents">
<option value="">select</option>
<?php
while($row = $result->fetch_assoc()) {
?>
<option value="<?php echo $row['userid']; ?>"><?php echo $row['user']; ?></option>
<?php
}
?>
</select>