jQuery Forum

I have an HTML table here that, in the first column of "Shift Details" in the "shift 1" section, has a "Hide N" select element:

1.           <TR>
             <TD align="center" valign="middle" rowspan="30">
               some date
             </TD>
             <TD align="center" valign="middle" rowspan="10">
               shift 1
             </TD>
             <TD align="center" valign="middle" >
                 <label>Hide </label>
               <select id="hideselector">
                   <option>1</option>
                   <option>2</option>
                   <option>3</option>
                   <option>4</option>
                   <option>5</option>
                   <option>6</option>
                   <option>7</option>
                   <option>8</option>
                   <option>9</option>
                 </select>
             </TD>

Based on which option is selected, my jQuery hides labels below it, which are defined this way:

1.           <TD align="center" valign="middle" >
                 <label id="jl1">job Loc 1</label>
             </TD>

The quasi-Hobbesian jQuery is nasty and brutish, but unfortunately not short:

1. $('#hideselector').change(function () {
   
   
       $('#jl1').removeClass('hide');
       $('#jl2').removeClass('hide');
       $('#jl3').removeClass('hide');
       $('#jl4').removeClass('hide');
       $('#jl5').removeClass('hide');
       $('#jl6').removeClass('hide');
       $('#jl7').removeClass('hide');
       $('#jl8').removeClass('hide');
       $('#jl9').removeClass('hide');
   
   
       var hidecount = $('#hideselector').val();
       if (hidecount > 0) {
           $('#jl1').addClass('hide');
       }
       if (hidecount > 1) {
           $('#jl2').addClass('hide');
       }
       if (hidecount > 2) {
           $('#jl3').addClass('hide');
       }
       if (hidecount > 3) {
           $('#jl4').addClass('hide');
       }
       if (hidecount > 4) {
           $('#jl5').addClass('hide');
       }
       if (hidecount > 5) {
           $('#jl6').addClass('hide');
       }
       if (hidecount > 6) {
           $('#jl7').addClass('hide');
       }
       if (hidecount > 7) {
           $('#jl8').addClass('hide');
       }
       if (hidecount > 8) {
           $('#jl9').addClass('hide');
       }
   
   
   });

It works, but I'm hoping there's a more concise/terse way of accomplishing the same thing, especially since I will ultimately need 84 very similar blocks of code (7 days X 3 Shifts X 4 Job Locations per shift).