複数のドロップダウンボックスからの選択に基づいてテキストボックスを表示/非表示

Question

1から5までの値を持つドロップダウンメニューを持つテーブルがあります。ユーザーが任意のボックスで3未満の値を選択すると、テーブルの下にポップアップボックスが表示されます。ポップアップは、値が3未満のすべてのドロップダウン数に対して1回だけ表示する必要があります。<select id='purpose'>を割り当てるとコードが機能しますが、最初の<select>でのみ機能します。どのように私はそれをすべての人のために働かせるのですか？この機能を使用して

：HTMLの

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

スニペット：

         <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>