JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  
  <div id="chooseSubject">
    <label id="selectSubject" class="">Select your subject(s)</label>
    <table class="table">
      <tr>
        <th>
          <input type="checkbox" id="french">
          <label for="french"><span></span>French</label>
        </th>
        <th>
          <input type="checkbox" id="german">
          <label for="german"><span></span>German</label>
        </th>
      </tr>
    </table>
  </div>

</div>

CSS

.add-red-color {
  color: red;
}

.add-green-color {
  color: green;
}

JavaScript

$('#french').on('change', function() {
	//When fench checkbox is ticked, add this class, or remove it 
  $('#selectSubject').toggleClass('add-red-color');
});
$('#german').on('change', function() {
  //When fench checkbox is ticked, add this class, or remove it 
  $('#selectSubject').toggleClass('add-green-color');
});