Как изменить класс CSS на теге Div в JQuery на основе определенного условия

У меня есть следующий HTML:

<div class="required">
<label for="personID">People</label>
<select name="personID" id="personID"  class="select">
<option value="" selected="selected" >No One Selected</option>
<option value="groupA" >Group A</option>
<option value="groupB" >Group B</option>
...

И у меня есть этот HTML:

<div class="visControl optional" style="display: none;">
<label for="refNum">Reference Number</label>
<input type="text" value="" name="refNum" id="refNum">
</div>

И у меня есть следующий SCRIPT:

<script>
  $('#personID').change(function() {
    if ($('#personID').val() == 'groupB') $('.visControl').show();
    else $('.visControl').hide();
  }); // end .change()
</script>

Мой скрипт правильно контролирует видимость блока Reference Number. Но то, что я хочу также сделать, это изменить атрибут класса от "необязательного" до "обязательного", чтобы он соответствовал видимости.

Другими словами, когда я показываю блок Reference Number, я хочу, чтобы div.optional стал div.required и когда я div.required блок Reference Number, я хочу, чтобы div.required стал div.optional