JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <form role="form" class="left-checkbox-container col-xs-12">
              <div class="custom-checkbox">
                <input type="checkbox" id="coverage"/>
                <label for="coverage"></label> <span>coverage</span>
              </div>
              <div class="custom-checkbox">
                <input type="checkbox" id="subscription" name="check" />
                <label for="subscription"></label> <span>subscription</span>
              </div>
              <div class="custom-checkbox">
                <input type="checkbox" id="category" name="check" />
                <label for="category"></label> <span>category</span>
              </div>
                    <div class="custom-checkbox">
                <input type="checkbox" id="customers" name="check" />
                <label for="customers"></label> <span>customers</span>
              </div>
                    <div class="custom-checkbox">
                <input type="checkbox" id="activation" name="check" />
                <label for="activation"></label> <span>activation</span>
              </div>
                    <div class="custom-checkbox">
                <input type="checkbox" id="clicks" name="check" />
                <label for="clicks"></label> <span>clicks</span>
              </div>
            </form>
  </div>
</div>            

           
<div class="container">
  <div class="row">
<div class = 'category col-xs-4'>category</div>
<div class = 'subscription col-xs-4'>subscription</div>
<div class = 'coverage col-xs-4'>coverage</div>
<div class = 'activation col-xs-4'>activation</div>
<div class = 'customers col-xs-4'>customers</div>
<div class = 'clicks col-xs-4'>clicks</div>


<button class="btn btn-danger" id='showBtn'> show/hide </button>
 ...

CSS

.container div, button {
  margin-top: 20px;
}
.col-xs-4 {
  border: 2px solid blue;
  color: red;
  font-size: 20px;
}

JavaScript

var checkboxToTdBinding = [
      {checkbox: $('#category'), td: $('.category')},
      {checkbox: $('#subscription'), td: $('.subscription')},
      {checkbox: $('#coverage'), td: $('.coverage')},
      {checkbox: $('#clicks'), td: $('.clicks')},
      {checkbox: $('#activation'), td: $('.activation')},
      {checkbox: $('#customers'), td: $('.customers')}

    ];
      
         var showHideColInTablle = function () {
      for (var i = 0; i < checkboxToTdBinding.length; i++) {

        if(!checkboxToTdBinding[i].checkbox.is(":checked")){
          checkboxToTdBinding[i].td.hide();
        }
        else if (checkboxToTdBinding[i].checkbox.is(":checked")){
          checkboxToTdBinding[i].td.show();
          //localStorage.setItem('key', JSON.stringify(checkboxToDivBinding[i].checkbox.is(":checked")));

        }
      }
    };
      
      $('#showBtn').on('click', function() {
              showHideColInTablle();
      })
              showHideColInTablle();