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 b1"  id="prod1a" value="prod1" autocomplete="off" />
            <div class="[ btn-group ]">
              <label for="prod1a" class="[ btn btn-primary ]">
                <span class="[ glyphicon glyphicon-ok ]"></span>
                <span> </span>
              </label>
              <label for="prod1a" class="[ btn btn-default active ]">
                Book #1
              </label>
            </div>
          </div>

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

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

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

$('.b1').on('change', function(){
	$('.b1').prop('checked',this.checked);
});
$('.b2').on('change', function(){
	$('.b2').prop('checked',this.checked);
});
$('.m1').on('change', function(){
	$('.m1').prop('checked',this.checked);
});
$(".select-product").change(function(e) {
  $(".counter").text($("#1b [type='checkbox']:checked").length);
});