JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="group1" style="float: left;border: 1px solid green;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <input type="checkbox" class="Maths" name="Maths">Maths
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <input type="checkbox" class="English" name="English">English
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <input type="checkbox" class="Science" name="Science">Science
    </label>
  </p>
  <p class="subject-list">
    <label for="computer-science">
      <input type="checkbox" class="computer-science" name="computer-science">Computer science
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <input type="checkbox" class="Tennis" name="Tennis">Tennis
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <input type="checkbox" class="cricket" name="cricket">cricket
    </label>
  </p>
</div>
<div class="group2" style="float: right; border: 1px solid red; width: 200px;">
  <p class="category">Academic</p>
  <p class="subject-list">
    <label for="Maths">
      <div class="Maths" style="padding-left: 10px;">Maths</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="English">
      <div class="English" style="padding-left: 10px;">English</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="Science">
      <div class="Science" style="padding-left: 10px;">Science</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="computer-science">
      <div class="computer-science" style="padding-left: 10px;">Computer science</div>
    </label>
  </p>
  <p class="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <div class="Tennis" style="padding-left: 10px;">Tennis</div>
    </label>
  </p>
  <p...

CSS

.group2 div {
  display: none;
}
.group2 .category {
  display: none;
}

JavaScript

var totals = {};
$('.group1').find('input').click(function(){
  var itemName = $(this).attr('name');
  var item = $('.group2').find('.' + itemName).toggle();
  var change = $(this).is(':checked') ? 1 : -1;
  var categoryText = $(this)
    	.closest('.subject-list')
      .prevAll('.category:first')
      .text();
  var category = camelize( categoryText );
  totals[category] = change + (totals[category] || 0);
  updateCategories();
});

function updateCategories() {  
  $('.group2').find('.category').each(function() {
  	var thisCat = camelize( $(this).html() );
    if (thisCat in totals && totals[thisCat] > 0) {
    	$(this).show();
    } else {
    	$(this).hide();
    }
  });
}
// From http://stackoverflow.com/a/2970667/5357459
function camelize(input) {
  return input.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
    if (+match === 0) { return ''; }
    return index === 0 ? match.toLowerCase() : match.toUpperCase();
  });
}