How to select every second element within jquery nextUntil?

Question

I'm trying to select every second element after using .nextUntil() method of jquery. How can i select every second element after the selector element?

I already tried using .nextUntil(".headerRow", "tr:odd") as well as .nextUntil(".headerRow", "tr:nth-child(odd)")

This is my line of code which i want to get working:

$('.headerRow').nextUntil(".headerRow", "tr:nth-child(odd)").css("background-color", "rgb(240,240,240)");

It selects every second tr... however it selects the rows based on the whole table instead of the last .headerRow

It looks like:

<tr> - (not selected)
<tr> - (not selected)
<tr> - (not selected)
<tr class="headerRow"> - (not selected)
<tr> - (selected)
<tr> - (not selected)
<tr class="headerRow"> - (not selected)
<tr> - (not selected) <----- should be selected
<tr> - (selected) <------ shouldn't be selected
<tr> - (not selected) <----- should be selected
<tr class="headerRow"> - (not selected)
<tr> - (selected)
<tr> - (not selected)
...

It should start selecting the <tr> like this:

<tr> - (not selected, ok)
<tr> - (not selected, ok)
<tr> - (not selected, ok)
<tr class="headerRow"> - (not selected)
<tr> - (selected)
<tr> - (not selected)
<tr class="headerRow"> - (not selected)
<tr> - (selected)
<tr> - (not selected)
<tr> - (selected)
<tr class="headerRow"> - (not selected)
<tr> - (selected)
<tr> - (not selected)
...

How can i fix this?

EDIT: Table is generated like this:

<table id="bomTable" class="hover">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    <c:forEach items="${list.listItems}" var="item">
        <tr <c:if test="${item.rowType == 'HEADLINE'}">class="headerRow"</c:if>>
            <td>${item.materialNumber}</td>
            <td>${item.materialDescription}</td>
            <td>${item.quantity}</td>
            <td>${item.unit}</td>
         </tr>
     </c:forEach>
     </tbody>
</table>

Answer 1

Sadly not achievable by just using :odd, :even since odds and evens are references to their absolute order.

Therefore you first need to group - before applying odds and evens - which in return will become relative for that group.
Here is one example by using .each():

$('.headerRow').each(function() {
   $(this).nextUntil('.headerRow', 'tr:even').css('background', 'red');
});

<table>
<tr><td>no</td></tr>
<tr><td>no</td></tr>
<tr><td>no</td></tr>
<tr class="headerRow"><td>---HR no---</td></tr>
<tr><td>sel</td></tr>
<tr><td>no</td></tr>
<tr class="headerRow"><td>---HR no---</td></tr>
<tr><td>sel</td></tr>
<tr><td>no</td></tr>
<tr><td>sel</td></tr>
<tr><td>no</td></tr>
<tr><td>sel</td></tr>
<tr class="headerRow"><td>---HR no---</td></tr>
<tr class="headerRow"><td>---HR no---</td></tr>
<tr class="headerRow"><td>---HR no---</td></tr>
<tr class="headerRow"><td>---HR no---</td></tr>
<tr><td>sel</td></tr>
<tr><td>no</td></tr>
</table>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

$(this).nextUntil('.headerRow'), is our iterable group.