update next elements at the same level in the DOM

I have this code :

<div class="trackOn" id="line1">
    <span class="trackCounter">1</span>
    <span class="trackTime1">
        <select name="hours[]" class="trackInputDate" onChange="updateHours(this.value)" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>                
        </select>
    </span>
    <span class="trackTime2"></span>
    <span class="trackTime3"></span>
</div>

<div class="trackOn" id="line2">
    <span class="trackCounter">2</span>
    <span class="trackTime1">
        <select name="hours[]" class="trackInputDate" onChange="updateHours(this.value)" >
            <option value="1">1</option>
            <option value="2">2</option>
        开发者_如何学C    <option value="3">3</option>                
        </select>
    </span>
    <span class="trackTime2"></span>
    <span class="trackTime3"></span>
</div>

<div class="trackOn" id="line3">
    <span class="trackCounter">3</span>
    <span class="trackTime1">
        <select name="hours[]" class="trackInputDate" onChange="updateHours(this.value)" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>                
        </select>
    </span>
    <span class="trackTime2"></span>
    <span class="trackTime3"></span>
</div>

<div class="trackOn" id="line4">
    <span class="trackCounter">4</span>
    <span class="trackTime1">
        <select name="hours[]" class="trackInputDate" onChange="updateHours(this.value)" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>                
        </select>
    </span>
    <span class="trackTime2"></span>
    <span class="trackTime3"></span>
</div>

now, for example, if I select the value 3 from #line2 I'd like to change the value of the next select boxex (so the ones on #line3 and #line4) in 3.

It would be better to attach the event handler with jQuery:

$('.trackInputDate').change(function() {
    updateHours($(this).val()); // or was `updateHours` supposed to be the 
                                // function that should handler the update?
    $(this).closest('.trackOn')
        .nextAll('.trackOn')
        .find('.trackInputDate').val($(this).val());
});

Reference: .closest, .nextAll, .find

The DOM must be completely parsed before you can attach the event handlers. So either put the code in the ready() event handler:

$(function() {
   // code here
});

or put it at the bottom of the page.