Select next occurance of a class after the current selector

Select next occurance of a class after the current selector

I'm trying to change the state of one form field, "idSerialNo" based on
changes to another, "idVerification", but I'm having difficulty accessing
the correct element, as there are three forms on the page.
The relevant section of each for looks like this:
// Input 1, a select element
<div id="sigIDVerification_field" class="clearfix ">
<label for="sigIDVerification"> … </label>
<div class="input">
<select id="sigIDVerification" class="span5 selectpicker sortable
idVerification" name="sigIDVerification" style="display: none;"> …
</select>
<div class="btn-group bootstrap-select span5 sortable
idVerification"> … </div>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
// Input 2, a text input
<div id="sigIDSerialNo_field" class="clearfix ">
<label for="sigIDSerialNo"> … </label>
<div class="input">
<input id="sigIDSerialNo" class="span5 idSerialNo" type="text"
value="" name="sigIDSerialNo"></input>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
Note that the wrapping on the select element is due to a custom skin.
I'm trying to register an event listener for the select.idVerification
element of each of the three forms. When the select element is changed, I
want to check if it is the default value, if so hide the the div block
(here div#sigIDSerialNo_field) and set the value of input.idSerialNo to
""; if the value of the select element is not default, it will unhide
div#sigIDSerialNo_field, if it is hidden. My problem is that the id for
each of the divs to show/hide will be different, and out of my control.
What I want to do is select the next occurence of .idSerialNo after this
.idVerification and then I can get the grandparent of the .idSerialNo
element. However, I've found that .next() only works on direct siblings,
so I can't use that.
Is there a way I can accomplish my goal?