JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id = "Spelling">
  Spelling working at text displayed here 
</div>
<div id = "Writing">
  Writing greater depth text displayed here
</div>
<div id = "Reading">
  Reading not started text displayed here
</div>

<form class="new_english_grade" id="new_english_grade" action="/english_grades" accept-charset="UTF-8" method="post">


      <div class="field">
        <label for="english_grade_subcategory">Subcategory</label>
        <select name="english_grade" id="english_grade_subcategory">
        <option></option>
        <option value="Spelling">Spelling</option>
    <option value="Reading">Reading</option>
    <option value="Writing">Writing</option></select>
      </div>

      <div class="field">
        <label for="english_grade_performance_grade">Performance grade</label>
        <select name="english_grade[performance_grade]" id="english_grade_performance_grade">
        <option></option>
        <option value="Not-started">Not-started</option>
    <option value="Working-towards">Working-towards</option>
    <option value="Working-at">Working-at</option>
        <option value="Greater-depth">Greater-depth</option></select>
        </div>
</form>
<script>
$('select[name="english_grade"]').change(function () {
  $('#spelling_working_at').css("display","none");
  console.log($(this).val());
  var fieldToShow = $(this).val();
  $("#" + fieldToShow).css("display","block");
});
</script>

CSS

#Spelling,
#Writing,
#Reading
{
  display: none;
}