Jquery and PowerSchool- If statement - show hidden fields

The below will target a div and make it appear and disappear depending on what is selected in another field.

~[wc:commonscripts]

<script>

$j(function($){

 $j("#ELStatusField").change(function() {

  if ($j(this).val() == "01" || $(this).val() == "06") {

    $j('div#AccessEllsDiv').show();

    $j('#AccessElls').attr('required', '');

    $j('#AccessElls').attr('data-error', 'This field is required.');

  } else {

    $j('#AccessEllsDiv').hide();

    $j('#AccessElls').val("");

    $j('#AccessElls').removeAttr('required');

    $j('#AccessElls').removeAttr('data-error');

  }

});

$j("#ELStatusField").trigger("change");

});

</script>

Break down of the code

 Looks for the change of the option selected on the field by using an element ID.
$j("#ELStatusField").change(function() {

If the selected option change equals the select value of 01 or 06 
if ($j(this).val() == "01" || $(this).val() == "06") { 

It will do the below.

1. show the field with the element ID of "AccessEllsDiv"

$j('div#AccessEllsDiv').show();

2. Make this field required

$j('#AccessElls').attr('required', '');

3. If user doesn't select a value for this field when they click submit, this will show the alert message.

$j('#AccessElls').attr('data-error', 'This field is required.');

If the user selects any other option that is not "01" or "06" the below will happen

1. The div "AccessEllsDiv" will be hidden.      $j('#AccessEllsDiv').hide();
2. Remove the required attribute                  $j('#AccessElls').removeAttr('required');
3. Remove the alert message                         $j('#AccessElls').removeAttr('data-error');

Makes the magic happen                                       $j("#ELStatusField").trigger("change");

HTML

<div class="form-box">

    <label for="ELStatusField">EL Status (LEP_ELL_STATUS_CODE)</label>

    <select class="form-control" id="ELStatusField" name="[Students.S_PA_STU_X]LEP_ELL_STATUS_CODE">

          <option value=""></option>

<option value="01">01 - Current EL, not LIFE</option>

<option value="03">03 - Former EL, exited and in 1st year of monitoring</option>

<option value="04">04 - Former EL, exited and in 2nd year of monitoring</option>

<option value="07">07 - Former EL, exited and in 3rd year of monitoring</option>

<option value="08">08 - Former EL, exited and in 4th year of monitoring</option>

<option value="05">05 - Former EL, exited and no longer monitored</option>

<option value="06">06 - Current EL and LIFE</option>

<option value="99">99 - Never EL</option>

</select>

  </div>

  <div class="form-box" id="AccessEllsDiv">

    <label for="AccessElls">Access for EL’s Assessment (S_PA_STU_X.ACCESS_ELLS_ASSESSMENT)</label>

    <select class="form-control" id="AccessElls" name="[Students.S_PA_STU_X]ACCESS_ELLS_ASSESSMENT">

    <option value=""></option>

      <option value="E">E</option>

<option value="A">A</option>

<option value="O">O</option>

</select>

  </div>