Jquery button onclick attribute not working - html

Question

$.get($querystudent, function(response)
{
tbodystudent.empty();
console.log("Table TBODY Cleared!");
var students = response.result;
var $i = 0
$.each(students, function(_,student)
{
$i = student.ID
tbodystudent.append(
$("<tr>").append(
$("<td>").text(student.FirstName),
$("<td>").text(student.MiddleName),
$("<td>").text(student.LastName),
$("<td>").text(student.CourseID),
$("<td>").text(student.YearLevel),
$("<input></input>").attr({'type':'button','class':'button is-primary is-small','id':$i, 'onclick': select($i)}).val("Select")
),
);
});
}, "json");
This is my current Jquery code that appends data to the tbody with attribute onclick trying to call a function select(),
function select(x)
{
console.log('Im Here! ', x)
}
Without clicking any button, the console is showing that the three buttons have been clicked already from the start of the page Onload.
Console indicates that the function is called already with no buttons being clicked
Inspect also indicates that the onclick attribute was not added to the button attributes

Answer 1

Based on your idea, I've updated and let it works. You can check the below demo:
'onclick': select($i) -> 'onclick': 'select(' + $i + ')'
$("<input></input>") -> $("<button>") : I'm still finding the reason why $("<input>") is not working
const students = [{
ID: 1,
FirstName: 'A',
MiddleName: 'B',
LastName: 'C',
CourseID: 1,
YearLevel: 1
},
{
ID: 2,
FirstName: 'A',
MiddleName: 'B',
LastName: 'C',
CourseID: 1,
YearLevel: 1
}, {
ID: 3,
FirstName: 'A',
MiddleName: 'B',
LastName: 'C',
CourseID: 1,
YearLevel: 1
}
]
function select(x) {
console.log('Im Here! ', x)
}
$.each(students, function(_, student) {
$i = student.ID
$('#tbodystudent').append(
$("<tr>").append(
$("<td>").text(student.FirstName),
$("<td>").text(student.MiddleName),
$("<td>").text(student.LastName),
$("<td>").text(student.CourseID),
$("<td>").text(student.YearLevel),
$("<button>").attr({
'type': 'button',
'class': 'button is-primary is-small',
'id': $i,
'onclick': 'select(' + $i + ')'
}).text("Select")
),
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">FirstName</th>
<th scope="col">MiddleName</th>
<th scope="col">LastName</th>
<th scope="col">CourseID</th>
<th scope="col">YearLevel</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="tbodystudent">
</tbody>
</table>