Get index of a class Element - html

Question

I've been stuck for hours on a problem that might be actually simple but I can't manage to find the solution.
To be short, I want to know the index (ie the first / the second / the third etc...) of a checkbox when clicking on it.
Here's the jsfiddle showing what's currently working and what is not. I've tried many things but couldn't find the solution I'm looking for.
https://jsfiddle.net/cpydwqk3/2/ <div>(this example applies only for the class "admin" which applies herself on the checkbox "admin").
function usermodif(identifiant) {
alert($('.admin').index(this)); //return -1
}
$("tr").click(function() {
alert($("tr").index(this)); //work but applies on whole line
});
<table>
<caption>Utilisateurs</caption>
<tr>
<th scope="col">pseudo</th>
<th scope="col">points</th>
<th scope="col">points_session</th>
<th scope="col">admin</th>
<th scope="col">banni</th>
</tr>
<tr>
<th scope="row">firstguy</th>
<td><input type="text" name="points" value="45" id="points"></td>
<td><input type="text" name="points_session" value="6" id="points_session"></td>
<td><input type="checkbox" class="admin" name="admin" onclick="usermodif(this.className)"> </td>
<td><input type="checkbox" class="banni" name="banni"> </td>
</tr>
<tr>
<th scope="row">Nico</th>
<td><input type="text" name="points" value="21" id="points"></td>
<td><input type="text" name="points_session" value="21" id="points_session"></td>
<td><input type="checkbox" class="admin" name="admin" onclick="usermodif(this.className)" checked> </td>
<td><input type="checkbox" class="banni" name="banni"> </td>
</tr>
<tr>
<th scope="row">anonyme</th>
<td><input type="text" name="points" value="0" id="points"></td>
<td><input type="text" name="points_session" value="0" id="points_session"></td>
<td><input type="checkbox" class="admin" name="admin" onclick="usermodif(this.className)"> </td>
<td><input type="checkbox" class="banni" name="banni"> </td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Thanks in advance guys!

Answer 1

Traverse first tp the closest TR. Than get that closest TR index.
TR has an index amongst TBODY TRs, but not the checkbox.
Also, never use inline JavaScript on* attributes, same as you hopefully don't use inline style attributes. JS and CSS should be in one place only, and that's their respective files or tags.
$(".admin").on("click", function() {
const $par = $(this).closest("tr");
alert($par.index());
});
<table>
<tr>
<th scope="row">firstguy</th>
<td><input type="text" name="points" value="45" id="points"></td>
<td><input type="text" name="points_session" value="6" id="points_session"></td>
<td><input type="checkbox" class="admin" name="admin"> </td>
<td><input type="checkbox" class="banni" name="banni"> </td>
</tr>
<tr>
<th scope="row">firstguy</th>
<td><input type="text" name="points" value="45" id="points"></td>
<td><input type="text" name="points_session" value="6" id="points_session"></td>
<td><input type="checkbox" class="admin" name="admin"> </td>
<td><input type="checkbox" class="banni" name="banni"> </td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>