I want to get the number of the data array displayed in HTML on the javascript side.

There is no mention of the js library in the question, so I will write it in pure js.
Generally speaking, the question is, "I want to get the order of a certain element among the sibling elements."If so, I think it is easiest and easiest to find a list of sibling elements in a loop.
Regarding the event handler configuration, I personally think it is recommended that you configure it from the javascript code rather than with attributes such as onclick.Also, if you want to set up processing for each of these child elements, I think it is smart to set up an event handler in the container (parent) element that contains them, not each child element.
This section configures a click-on-click event handler for a container element and provides sample code until the child element is clicked to retrieve the order of the element.

//Set event handler in container element
var container= document.getElementById('container');
container.addEventListener('click', function(e){
  // Identify clicked child elements
  target=e.target||e.srcElement;
  while(target.parentElement!==container){
    target=target.parentElement;
  }
  
  // Search for sibling elements to get order
  varchildren=container.children;
  var index=-1;
  for (vari=0;i<children.length;i++){
    if(children[i]===target){
      index=i;
    }
  }
  
  // Error when index===-1
  if(index===-1){
    console.error(target);
  } else{
    // processing
    console.log('index=%d',index);
  }
});

<divid="container" th:each="test,stat:${testlist}">
    <div th:if="${test.islink}==false">
        <divth:text="${test.testLabel}">text index=0</div>
    </div>
    <div th:if="${test.islink}==true">
        <a href="#"th:text="${test.testLabel}">link index=1</a>
    </div>
    <div th:if="${test.islink}==true">
        <a href="#"th:text="${test.testLabel}">link index=2</a>
    </div>
</div>

If you have any questions, please leave a comment.

Note:

// Identify the clicked child element
target=e.target||e.srcElement;
while(target.parentElement!==container){
  target=target.parentElement;
}

This part is supplemented.First, var target=e.target||e.srcElement; retrieves the DOM element from the event object passed to the event handler.| refers to srcElement for compatibility (the old browser does not have the same target property).
Also, regarding the while()..., the target that I just got, that is, the element that actually caused the click event, may not be the element directly below the container element (i.e., the child element), but the grandson element located below it.For example, <a href="#"th:text="${test.testLabel}">link index=1</a>.In this case, searching for a list of sibling elements does not apply, so you can follow the parent element to reach the child element of the container element, that is, <divth:if="${test.islink}==true">.I'm not good at explaining, but if I don't understand, I'll edit it again.

<!--Set event handler for this container element-->
<divid="container" th:each="test,stat:${testlist}">
    <!--this is the child element-->
    <div th:if="${test.islink}==false">
        <!--- Click events may occur on this element (grandchild element) -->
        <!--Searching for this in container.children does not find it -->
        <divth:text="${test.testLabel}">text index=0</div>
    </div>

The index you want is
"How many parent elements of a clicked element appear in the parent element (of that parent element)"
That's it.

Retrieving clicked elements

The code in the onclick attribute allows you to view click events with the variable event.
So when you call the change function here, pass the event as an argument.

onclick="change(event)"

The change function assumes this under the name ev.

function change(ev){

Click events have a property called target, which is the clicked element.
In the change function, you can refer to it as ev.target.
You can pass it to $ to make it a jQuery element object.

$(ev.target)

Getting Parent Elements

jQuery uses the parent() method.

$(ev.target).parent()

Getting Indexes

jQuery uses the index() method.

$(ev.target).parent().index()

function change(ev){
	var index=$(ev.target).parent().index();
	$("#show_index").text(index);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
	<div>
		<div>Test Label 00</div>
	</div>
	<div>
		<a href="#"onclick="change(event)">Test Label 01</a>
	</div>
	<div>
		<div>Test Label 02</div>
	</div>
	<div>
		<a href="#"onclick="change(event)">Test Label 03</a>
	</div>
	<div>
		<a href="#"onclick="change(event)">Test Label 04</a>
	</div>
</div>

<p>index:<spanid="show_index"></span></p>

The following is off the subject.

Shallow nesting

If you have a deep nesting, you will have a hard time.
If you set th:if to the tag itself of the element you want to display without wrapping the element you want to display in <div th:if...>, the nesting will decrease by one and you won't need parent().

Generating indexes on the server side

The server-side code, data structure, DOM, JavaScript are probably too tightly coupled.
One way is to match the DOM structure with the data structure, but isn't it the limit from the question?

For example, Thymeleaf (you use this, right?)

index property: 0 Current 繰り返しrepeat index 」 at beginning
Keep Repeated Status

Now that you have these things, JavaScript doesn't have to think about anything if you generate HTML that passes the index by argument when you call the change function in onClick.

onclick="change(1)"

If the DOM structure changes, JavaScript does not need to be changed.