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="prod1a" value="prod1a" 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" 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() {

    jQuery(".counter").text(jQuery("[type='checkbox']:checked").length);

  });

});