How to count the total number of check box checked value
<p>we need to add the total number of check box checked count value in element.</p>

<p>But when we checked the check box in "heading 2" part , the checked count value was added in "heading 1" part .</p>

<p>I did not find the issue any one please guide me resolve this issue</p>

<p><a href="https://jsfiddle.net/gqcgwjq2/2/" rel="nofollow">DEMO</a></p>

<p><strong>HTMl:</strong></p>

<pre><code>    &lt;div id="main"&gt;


    &lt;div class="a"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-12 cb_select_head"&gt;
                    &lt;a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"&gt;&lt;span class=
                                    "glyphicon ecm-caret-down"&gt;&lt;/span&gt;&lt;/a&gt;&lt;span class="labelBlock labelCounter"&gt;
                                    &lt;span class="count-checked-checkboxes"&gt;0&lt;/span&gt;&lt;/span&gt;
                    &lt;span class="fb_options_head"&gt;heading 1&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;ul class="sidebar fb-list-option collapse in" id="function-collapse"&gt;
                    &lt;li&gt;&lt;a href="" data-toggle="collapse" data-target="#Actuarial-collapse"&gt;&lt;span class="glyphicon ecm-caret-right"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;input id="c1" name="cc" type="checkbox"&gt;
                      &lt;label for="c1"&gt;asdas&lt;/label&gt;

                    &lt;/li&gt;
                    &lt;li class="noArrow"&gt;
                      &lt;input id="c2" name="cc" type="checkbox"&gt;
                      &lt;label for="c2"&gt;asdasd&lt;/label&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="" data-toggle="collapse"&gt;&lt;span class="glyphicon ecm-caret-right"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;input id="c3" name="cc" type="checkbox"&gt;
                      &lt;label for="c3"&gt;asdasd
                      &lt;/label&gt;

                      &lt;ul&gt;
                                    &lt;li&gt;&lt;input id="c1" name="cc" type="checkbox"&gt;&lt;label for="c1"&gt;asd 1&lt;/label&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;input id="c1" name="cc" type="checkbox"&gt;&lt;label for="c1"&gt;sadas 2&lt;/label&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;input id="c1" name="cc" type="checkbox"&gt;&lt;label for="c1"&gt;asdas 3&lt;/label&gt;&lt;/li&gt;
                                    &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="" data-toggle="collapse"&gt;&lt;span class="glyphicon ecm-caret-right"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;input id="c4" name="cc" type="checkbox"&gt;
                      &lt;label for="c4"&gt;asdasd&lt;/label&gt;
                    &lt;/li&gt;
                    &lt;li class="noArrow"&gt;
                      &lt;input id="c5" name="cc" type="checkbox"&gt;
                      &lt;label for="c5"&gt;five&lt;/label&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;!--First List End--&gt;

          &lt;!--Second list start --&gt;

             &lt;div class="a"&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-md-12 cb_select_head"&gt;
                    &lt;a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"&gt;&lt;span class=
                                    "glyphicon ecm-caret-down"&gt;&lt;/span&gt;&lt;/a&gt;&lt;span class="labelBlock labelCounter"&gt;
                                    &lt;span class="count-checked-checkboxes"&gt;0&lt;/span&gt;&lt;/span&gt;
                    &lt;span class="fb_options_head"&gt;heading 2&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;ul class="sidebar fb-list-option collapse in" id="function-collapse"&gt;
                    &lt;li&gt;&lt;a href="" data-toggle="collapse" data-target="#Actuarial-collapse"&gt;&lt;span class="glyphicon ecm-caret-right"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;input id="c1" name="cc" type="checkbox"&gt;
                      &lt;label for="c1"&gt;asdas&lt;/label&gt;

                    &lt;/li&gt;
                    &lt;li class="noArrow"&gt;
                      &lt;input id="c2" name="cc" type="checkbox"&gt;
                      &lt;label for="c2"&gt;asdasd&lt;/label&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="" data-toggle="collapse"&gt;&lt;span class="glyphicon ecm-caret-right"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;input id="c3" name="cc" type="checkbox"&gt;
                      &lt;label for="c3"&gt;asdasd
                      &lt;/label&gt;

                      &lt;ul&gt;
                                    &lt;li&gt;&lt;input id="c1" name="cc" type="checkbox"&gt;&lt;label for="c1"&gt;asd 1&lt;/label&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;input id="c1" name="cc" type="checkbox"&gt;&lt;label for="c1"&gt;sadas 2&lt;/label&gt;&lt;/li&gt;
                                    &lt;li&gt;&lt;input id="c1" name="cc" type="checkbox"&gt;&lt;label for="c1"&gt;asdas 3&lt;/label&gt;&lt;/li&gt;
                                    &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="" data-toggle="collapse"&gt;&lt;span class="glyphicon ecm-caret-right"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;input id="c4" name="cc" type="checkbox"&gt;
                      &lt;label for="c4"&gt;asdasd&lt;/label&gt;
                    &lt;/li&gt;
                    &lt;li class="noArrow"&gt;
                      &lt;input id="c5" name="cc" type="checkbox"&gt;
                      &lt;label for="c5"&gt;five&lt;/label&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/div&gt;  


 &lt;/div&gt;
</code></pre>

<p><strong>JS:</strong></p>

<pre><code>$(document).ready(function() {
    var $checkboxes = $(
        '#main ul input[type="checkbox"]');
    $checkboxes.change(function() {
        var countCheckedCheckboxes = $checkboxes.filter(
            ':checked').length;
        $('.count-checked-checkboxes').text(
            countCheckedCheckboxes);
        $('#edit-count-checked-checkboxes').val(
            countCheckedCheckboxes);
    });
});
</code></pre>