JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list-class">
        <li><a href="#">All</a></li>
        <li><a href="#">Breakfast</a></li>
        <li><a href="#">Lunch</a></li>
        <li><a href="#">Dinner</a></li>
        <li><a href="#">Snack</a></li>
   </ul>

JavaScript

$(".list-class li").click(function() {
        alert($(this).prevAll().length+1);
});