Show/Hide text box based on selection from multiple drop down boxes

Question

I have a table with a row of drop down menus with the values 1 -5. When the user selects a value less than three on any box, I want a pop up box to appear underneath the table. The popup only needs to appear once for any amount of drop downs that have a value less than 3, not once for every value less than 3. The code works when I assign the <select id='purpose'> , but it will only work on the first <select> . How do I make it work for all of them?

using this function:

$(document).ready(function(){
$('#purpose').on('change', function() {
if ( this.value < 3)
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
});

Snippet of the HTML:

                                      <td>
                                     <select id='purpose'>
                                        <option value="" selected="selected">Select...</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                     </select>
                                  </td>
                                  <td>
                                     <select id='purpose'>
                                        <option value="" selected="selected">Select...</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                     </select>

...

                                 </table>
                                 <div style='display:none;' id='business'>                                    
                                    <input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." />
                                    <br/>
                                 </div>

Answer 1

Each select element should be assigned to to the same class rather than the same id . Then, the logic can be applied to all classes.

<td>  
  <select class="purpose">
    <option value="" selected="selected">Select...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>     
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</td>                      
<td>  
  <select class="purpose">
    <option value="" selected="selected">Select...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>     
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</td>

And the appropriate selector is:

$(document).ready(function(){
  $('.purpose').on('change', function() {
    if ( this.value < 3) {
      $("#business").show();
    } else {
      $("#business").hide();
    }
  });
});

Answer 2

First you have duplicate ids which should be removed.

The popup only needs to appear once for any amount of drop downs that have a value less than 3, not once for every value less than 3. The code works when I assign the , but it will only work on the first . How do I make it work for all of them?

If you want the change event for work on both the both select you 
can just attach on select element. This will trigger the code for all
select elements as below.

 $(document).ready(function(){ $('select').on('change', function() { if ( this.value < 3) { $("#business").show(); } else { $("#business").hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <td> <select > <option value="" selected="selected">Select...</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </td> <td> <select> <option value="" selected="selected">Select...</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> ... </table> <div style='display:none;' id='business'> <input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." /> <br/> </div>