Count number of selected checkboxes and display value in appropriate position

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 Jquery: How to count every checked checkboxes

JS fiddle example

http://ift.tt/1OYQHfU

HTML

<div id="type1" class="type"><h3>1.2 Select material v1</h3>
                            <span id="value">x</span><button class="bob" type="button" name="material" value="1">Dogs</button>
                            <span id="value">x</span><button  class="bob" type="button" name="material" value="2">Birds</button>                    <span id="value">x</span><button  class="bob" type="button" name="material" value="3">Reptiles</button>                       </div>


              <div id="material1" class="material">
                            <input  class="select_all" type="checkbox" name="tile[]" value="1">Pugs
                            <input  class="select_all" type="checkbox" name="tile[]" value="2">Boxer
                            <input clas="select_all" type="checkbox" name="tile[]" value="3">Dalmation
                        </div>
                        <div id="material2" class="material">
                                <input  class="select_all" type="checkbox" name="tile[]" value="4">Eagle
                            <input  class="select_all" type="checkbox" name="tile[]" value="5">Swan
                            <input clas="select_all" type="checkbox" name="tile[]" value="6">Budgie
                        </div>
                        <div id="material3" class="material">
                            <input  class="select_all" type="checkbox" name="tile[]" value="7">Snake
                            <input  class="select_all" type="checkbox" name="tile[]" value="8">Lizard
                            <input clas="select_all" type="checkbox" name="tile[]" value="9">Iguana
                        </div>