title: Count number of selected checkboxes and display value in appropriate position
body: <p>I would like to count the number of selected checkboxes from a list, and then display the number of checkboxes selected next to the corresponding divs. Ie if the user selects 3 option from the Dogs list, 2 from the Birds list and 1 from the reptile list the 'x' next to the buttons get replaced by 3, 2, and 1 respectively, rather than getting 6 next to Dogs, as I am currently getting.     I have tried to follow this question <a href="https://stackoverflow.com/questions/14725969/jquery-how-to-count-every-checked-checkboxes/">How to count every checked checkboxes</a> </p>
  
  <p><strong>JS fiddle example</strong></p>
  
  <p><a href="https://jsfiddle.net/j2dypbhc/8/" rel="nofollow noreferrer">https://jsfiddle.net/j2dypbhc/8/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="type1" class="type"&gt;
      &lt;h3&gt;1.2 Select material v1&lt;/h3&gt;
  
      &lt;span id="value"&gt;x&lt;/span&gt;
      &lt;button class="bob" type="button" name="material" value="1"&gt;Dogs&lt;/button&gt;
  
      &lt;span id="value"&gt;x&lt;/span&gt;
      &lt;button class="bob" type="button" name="material" value="2"&gt;Birds&lt;/button&gt;                  
  
      &lt;span id="value"&gt;x&lt;/span&gt;
      &lt;button class="bob" type="button" name="material" value="3"&gt;Reptiles&lt;/button&gt;                       
  &lt;/div&gt;
  &lt;div id="material1" class="material"&gt;
      &lt;input  class="select_all" type="checkbox" name="tile[]" value="1"&gt;Pugs
      &lt;input  class="select_all" type="checkbox" name="tile[]" value="2"&gt;Boxer
      &lt;input clas="select_all" type="checkbox" name="tile[]" value="3"&gt;Dalmation
  &lt;/div&gt;
  &lt;div id="material2" class="material"&gt;
      &lt;input  class="select_all" type="checkbox" name="tile[]" value="4"&gt;Eagle
      &lt;input  class="select_all" type="checkbox" name="tile[]" value="5"&gt;Swan
      &lt;input clas="select_all" type="checkbox" name="tile[]" value="6"&gt;Budgie
  &lt;/div&gt;
  &lt;div id="material3" class="material"&gt;
      &lt;input  class="select_all" type="checkbox" name="tile[]" value="7"&gt;Snake
      &lt;input  class="select_all" type="checkbox" name="tile[]" value="8"&gt;Lizard
      &lt;input clas="select_all" type="checkbox" name="tile[]" value="9"&gt;Iguana
  &lt;/div&gt;
  </code></pre>