JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">

  <div class="cart">
    <h4>Selected products: <span class="counter">0</span></h4>
  </div>

  <div id="exTab" class="container">
    <ul class="nav nav-pills">
      <li class="active">
        <a href="#1b" data-toggle="tab">Show All</a>
      </li>
      <li>
        <a href="#2b" data-toggle="tab">Books</a>
      </li>
      <li>
        <a href="#3b" data-toggle="tab">Movies</a>
      </li>
    </ul>

    <div class="tab-content clearfix">
      <div class="tab-pane active" id="1b">

        <form method='post' action='bulk'>
          <div class="[ form-group ]">
            <input type="checkbox" class="select-product" name="selected[]" id="prod1" value="prod1" autocomplete="off" />
            <div class="[ btn-group ]">
              <label for="prod1" class="[ btn btn-primary ]">
                <span class="[ glyphicon glyphicon-ok ]"></span>
                <span> </span>
              </label>
              <label for="prod1" class="[ btn btn-default active ]">
                Book #1
              </label>
            </div>
          </div>

          <div class="[ form-group ]">
            <input type="checkbox" class="select-product" name="selected[]" id="prod2" value="prod2" autocomplete="off" />
            <div class="[ btn-group ]">
              <label for="prod2" class="[ btn btn-primary ]">
                <span class="[ glyphicon glyphicon-ok ]"></span>
                <span> </span>
              </label>
              <label for="prod2" class="[ btn btn-default active ]">
                Book #2
              </label>
            </div>
          </div>

          <div class="[ form-group ]">
            <input type="checkbox" class="select-product" name="selected[]" id="prod3" value="prod3" autocomplete="off" />
       ...

CSS

.nav.nav-pills,
.cart {
  padding-bottom: 25px;
}

.form-group input[type="checkbox"] {
  display: none;
}

.form-group input[type="checkbox"] + .btn-group > label span {
  width: 20px;
}

.form-group input[type="checkbox"] + .btn-group > label span:first-child {
  display: none;
}

.form-group input[type="checkbox"] + .btn-group > label span:last-child {
  display: inline-block;
}

.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
  display: inline-block;
}

.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
  display: none;
}

JavaScript

jQuery(document).ready(function($) {

  jQuery(".select-product").change(function() {
  var checkValue = jQuery(this).prop('checked');
    $('.select-product#'+jQuery(this)[0].id).each(function(){
        if(checkValue==true){
        	jQuery(this).prop('checked',true)
        }else{
        jQuery(this).prop('checked',false);
        }     
    });
    var uniqueId = [];
jQuery("[type='checkbox']:checked").each(function(){
  uniqueId.push(jQuery(this)[0].id);
});


Array.prototype.getUnique = function(){
   var u = {}, a = [];
   for(var i = 0, l = this.length; i < l; ++i){
      if(u.hasOwnProperty(this[i])) {
         continue;
      }
      a.push(this[i]);
      u[this[i]] = 1;
   }
   return a;
}
    jQuery(".counter").text(uniqueId.getUnique().length);
  });

});