无法在javascript中动态获取元素ID

I have a list of students that I am looping through and adding to my page. Each student has a unique ID, and when getStudentInfo is invoked, it does something with the id. The problem is that whichever student I click, I get back the same id, belonging to student1.

Where am I going wrong?

foreach ($students as $student) {


echo '<tr>';
    echo '<td>
        '.$student[student_permalink].'
        <input type="submit" 
            value="info" 
            onclick="getStudentInfo()"
            class="student-name-btn" 
            id="'.$student[student_permalink].'" 

        /> 
    </td>';

}

js:

function getStudentInfo() {
    var studentLink = $('.student-name-btn').attr('id');
    console.log(studentLink);
}

Your code is selecting all the buttons on the page with that class and than reads the id of the first one in the list. You are not limiting it to the one that was clicked.

What most people would do is add events with jQuery and not inline.

//needs to be loaded after the element or document ready
$(".student-name-btn").on("click", function() {
    console.log(this.id);
});

For yours to work, you would need to pass a reference to the button that was clicked.

onclick="getStudentInfo(this)"

and than change it to use the node passed in

function getStudentInfo(btn) {
    var studentLink = $(btn).attr('id');
    console.log(studentLink);
}

You can pass the reference to the element being clicked on the onclick event

foreach ($students as $student) {


echo '<tr>';
    echo '<td>
        '.$student[student_permalink].'
        <input type="submit" 
            value="info" 
            onclick="getStudentInfo(this)" // << added this which refers to the input
            class="student-name-btn" 
            id="'.$student[student_permalink].'" 

        /> 
    </td>';

}

And then use that to fetch the id in the js

function getStudentInfo(el) {
    var studentLink = $(el).attr('id');
    console.log(studentLink);
}

Don't use inline events - there's no need to clutter up the HTML with that. You have a common class on your element, so just make a jQuery handler and use an instance of this

$('.student-name-btn').click(function() {
    var id = this.id;
});

Like @epascarello alluded to, you are not selecting the button that was actually clicked. What you should do is have your event handling in your JS, not in the HTML so you can see better how it works and use the this keyword within the closure to reference the clicked button.

$(document).on('click', '.student-name-btn', function(evt) {

    // Prevent default if trying to do your own logic
    evt.preventDefault();

    // Need to use the "this" keyword to reference the clicked element
    var studentId = $(this).attr('id');

    console.log(studentId);

});

You can do this without inline JavaScript and since you're using jQuery drop the onClick() and the form element:

echo '<tr>';
echo '<td id="'.$student['student_permalink'].'" >
     '.$student['student_permalink'].' 
      </td>';

You also need to quote the identifier in the array variable, 'student_permalink'.

The jQuery will be this:

$('td').click(function() {
    var studentLink = this.id;
    console.log(studentLink);
});