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="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="category">Sports</p>
  <p class="subject-list">
    <label for="Tennis">
      <div class="Tennis" style="padding-left: 10px;">Tennis</div>
    </label>
  </p>
  <p class="subject-list">
    <label for="cricket">
      <div class="cricket" style="padding-left: 10px;">cricket</div>
    </label>
  </p>
</div>

CSS

.group2 div {
  display: none;
}

JavaScript

$('.group1').find('input').click(function(){
  var item = $(this).attr('name');
  $('.group2').find('.' + item).toggle();
});