title: j-query function to update value onchange
body: <p>I am very new to programming world. I have written the following code to calculate number of classes per faculty and total number of classes. But the code does not give the desired result. Any change in a particular row or column should effect only that row or column. Only the box in the South-East corner will be effected by change in any where. But in the present code one change effects all. How to fix it?</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="jquery-1.11.1.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;table border="1" style="border-collapse:collapse" align="center"&gt;
              &lt;caption&gt;
                  &lt;h3&gt;Assign Teacher&lt;/h3&gt;
              &lt;/caption&gt;
  
              &lt;tr&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;MON&lt;/th&gt;
                  &lt;th&gt;TUE&lt;/th&gt;
                  &lt;th&gt;Total&lt;/th&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt; &lt;b&gt;Sem I Honours&lt;/b&gt;
                  &lt;/td&gt;
                  &lt;td align="center"&gt;
                      &lt;select id="" onchange="" &gt;
                          &lt;option&gt;&lt;/option&gt;
                          &lt;option id=""&gt;SP&lt;/option&gt;
                          &lt;option id=""&gt;AP&lt;/option&gt;
                          &lt;option id=""&gt;Guest&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
  
                  &lt;td align="center"&gt;
                      &lt;select  id=""  onchange=""&gt;
                          &lt;option&gt;&lt;/option&gt;
                          &lt;option id=""&gt;SP&lt;/option&gt;
                          &lt;option id=""&gt;AP&lt;/option&gt;
                          &lt;option id=""&gt;Guest&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      Total:
                      &lt;span class="cnt-total"&gt;0&lt;/span&gt;
                      &lt;br/&gt;    
                      SP:
                      &lt;span class="cnt-sp"&gt;0&lt;/span&gt;
                      &lt;br/&gt;    
                      AP:
                      &lt;span class="cnt-ap"&gt;0&lt;/span&gt;
                      &lt;br/&gt;    
                      Guest:
                      &lt;span class="cnt-guest"&gt;0&lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt; &lt;b&gt;Sem III Honours&lt;/b&gt;
                  &lt;/td&gt;
                  &lt;td align="center"&gt;
                      &lt;select id="" onchange=""&gt;
                          &lt;option&gt;&lt;/option&gt;
                          &lt;option id=""&gt;SP&lt;/option&gt;
                          &lt;option id=""&gt;AP&lt;/option&gt;
                          &lt;option id=""&gt;Guest&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
  
                  &lt;td align="center"&gt;
                      &lt;select id="" onchange=""&gt;
                          &lt;option&gt;&lt;/option&gt;
                          &lt;option id=""&gt;SP&lt;/option&gt;
                          &lt;option id=""&gt;AP&lt;/option&gt;
                          &lt;option id=""&gt;Guest&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      Total:
                      &lt;span class="cnt-total"&gt;0&lt;/span&gt;
                      &lt;br/&gt;    
                      SP:
                      &lt;span class="cnt-sp"&gt;0&lt;/span&gt;
                      &lt;br/&gt;    
                      AP:
                      &lt;span class="cnt-ap"&gt;0&lt;/span&gt;
                      &lt;br/&gt;    
                      Guest:
                      &lt;span class="cnt-guest"&gt;0&lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;b&gt;Total&lt;/b&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      Total:
                      &lt;span class="cnt-total"&gt;0&lt;/span&gt;
                      &lt;br/&gt;    
                      SP:
                      &lt;span class="cnt-sp"&gt;0&lt;/span&gt;
                      &lt;br/&gt;    
                      AP:
                      &lt;span class="cnt-ap"&gt;0&lt;/span&gt;
                      &lt;br/&gt;    
                      Guest:
                      &lt;span class="cnt-guest"&gt;0&lt;/span&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      Total:
                      &lt;span class="cnt-total"&gt;0&lt;/span&gt;
                      &lt;br/&gt;    
                      SP:
                      &lt;span class="cnt-sp"&gt;0&lt;/span&gt;
                      &lt;br/&gt;    
                      AP:
                      &lt;span class="cnt-ap"&gt;0&lt;/span&gt;
                      &lt;br/&gt;    
                      Guest:
                      &lt;span class="cnt-guest"&gt;0&lt;/span&gt;
                  &lt;/td&gt;
  
                  &lt;td&gt;
                      &lt;b&gt;Total:
                          &lt;span class="cnt-total"&gt;0&lt;/span&gt;
                          &lt;br/&gt;    
                          SP:
                          &lt;span class="cnt-sp"&gt;0&lt;/span&gt;
                          &lt;br/&gt;    
                          AP:
                          &lt;span class="cnt-ap"&gt;0&lt;/span&gt;
                          &lt;br/&gt;    
                          Guest:
                          &lt;span class="cnt-guest"&gt;0&lt;/span&gt;&lt;/b&gt; 
                  &lt;/td&gt;
              &lt;/tr&gt;
  
          &lt;/table&gt;
          &lt;script&gt;
              $('select').change(function() {
                  // get all selects
                  var allSelects = $('select'),
                      total = 0,
                      sp = 0,
                      ap = 0,
                      guest = 0;
  
                  // for each select increase count
                  $.each(allSelects, function(i, s) {
                      // increase count
                      if($(s).val() == 'SP') { total++ }
                      if($(s).val() == 'AP') { total++ }
                      if($(s).val() == 'Guest') { total++ }
                      if($(s).val() == 'SP') { sp++; }
                      if($(s).val() == 'AP') { ap++; }
                      if($(s).val() == 'Guest') { guest++; }
                  });
  
                  // update count values summary
                  $('.cnt-total').text(total);
                  $('.cnt-sp').text(sp);
                  $('.cnt-ap').text(ap);
                  $('.cnt-guest').text(guest);
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>