Iterate through input text boxes in a row

Question

I need to be able to have a user enter in a 5 digit numerical value in the CRN field. I already have the event triggered as soon as the fifth digit is entered.

What I need to do then is fill in the next 6 input fields with values from a jquery Ajax call, which I already have done.

I cannot figure out how to select the next 6 input fields with only knowing the ID of the CRN field. I have tried .nextAll() .closest() .prev() I cannot seem to get it to work.

What I really need to to be able to do is...loop through each field in the row like an array, if that is possible.

    <section id="myfirstsection">
        <div class="row">
            <div><input type="text" id="course_fsem_1" maxlength="5" placeholder="CRN"></div>
            <div><input type="text" id="sub_fsem_1" placeholder="FSEM" disabled></div>
            <div><input type="text" id="Sec_fsem_1" placeholder="Sec" disabled></div>
            <div><input type="text" id="lab_fsem_1" placeholder="N/A" disabled></div>
            <div><input type="text" id="title_fsem_1" placeholder="Title" value="" disabled></div>
            <div><input type="text" id="time_fsem_1" placeholder="Time" value="" disabled></div>
            <div><input type="text" id="days_fsem_1" placeholder="Days" value="" disabled></div>
        </div>
    </section>
    <section id="mysecondsection">
        <div class="row">
            <div><input name="course_fsem_alt_1" type="text" id="course_fsem_alt_1" maxlength="5" placeholder="CRN"></div>
            <div><input name="sub_fsem_alt_1" type="text" id="sub_fsem_alt_1" placeholder="FSEM" disabled></div>
            <div><input name="Sec_fsem_alt_1" type="text" id="Sec_fsem_alt_1" placeholder="Sec" disabled></div>
            <div><input name="lab_fsem_alt_1" type="text" id="lab_fsem_alt_1" placeholder="N/A" disabled></div>
            <div><input name="title_fsem_alt_1" type="text" id="title_fsem_alt_1" placeholder="Title" value="" disabled></div>
            <div><input name="time_fsem_alt_1" type="text" id="time_fsem_alt_1" placeholder="Time" value="" disabled></div>
            <div><input name="days_fsem_alt_1" type="text" id="days_fsem_alt_1" placeholder="Days" value="" disabled></div>
        </div>
    </section>

Answer 1

It looks like your structure contains a div that wraps each input. That may be causing ou some issues with using next and others.

Based on the structure you have, I would call the parent then, its siblings .

$('#course_fsem_1').parent().siblings().find('input');

In this example you can see that each of these elements have a different border: http://jsbin.com/lebevowobu/edit?html,js,output