Стилизация полей с помощью jQuery

var selectLength = $("#length"); 
var selectStudents = $("#students"); 
var selectDuration = $("#duration"); 
var selectValidity = $("#validity"); 
var selectQuantity = $("#quantity"); 
var selectIntro = $("#intro-class"); 
 
$("#button-result").on("click", function() { 
 
  $('select').each(function(i) { // Проходит по всем селектам 
    if ($(this).val() === '0') // Сравненте по "0" 
      $(this).addClass('sel-color'); 
    else 
      $(this).addClass('sel-color-success'); // Если все првально 
  }); 
}); 
 
$("#length, #duration, #quantity, #validity, #students").change(function() { 
  if (+$("select").val() !== 0) { // + переводит в цифры "0" 
    $(this).addClass('sel-color'); 
  } else { 
    $(this).removeClass('sel-color'); 
  } 
 
}) 
 
$("#button-clear").on('click', function() { 
  $('select').each(function(i) { // Проходит по всем селектам 
    $(this).removeClass('sel-color sel-color-success').removeAttr('disabled').val('0');; 
  }); 
  $("#result-culc").html(''); 
});

select { 
  border: 3px solid #4A6695; 
} 
 
.sel-color { 
  border: 3px solid #B80001; 
} 
 
.sel-color-success { 
  border: 3px solid green; 
} 
 
#button-clear:hover, 
#button-result:hover { 
  cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrap-calc"> 
  <label for="length">French course</label> 
  <select id="length" name="length"> 
    <option value="0">Choose</option> 
    <option value="General">General Course</option> 
    <option value="Exams">Exams Preparation</option> 
    <option value="General">Conversational French</option> 
    <option value="Exams">Business French</option> 
    <option value="Exams">Civilisation française</option> 
  </select> 
</div> 
<div class="wrap-calc"> 
  <label for="students">For how many students?</label> 
  <select id="students" name="students"> 
    <option value="0">Choose</option> 
    <option value="indiv">Individual</option> 
    <option value="group">2-3 people</option> 
  </select> 
</div> 
<div class="wrap-calc"> 
  <label for="duration">Lesson duration</label> 
  <select id="duration" name="duration"> 
    <option value="0">Choose</option> 
    <option value="lesDur-30">30 minutes</option> 
    <option value="lesDur-60">60 minutes</option> 
  </select> 
</div> 
<div class="wrap-calc"> 
  <label for="validity">Plan validity</label> 
  <!-------- Disable on select not on option --------> 
  <select id="validity" name="validity" selected="" disabled=""> 
    <option value="0">Choose</option> 
    <option id="1mon" value="1month">One month</option> 
    <option id="3mon" value="3months">Three months</option> 
  </select> 
</div> 
<div class="wrap-calc"> 
  <label for="quantity">Quantity of lessons</label> 
  <!-------- Disable on select not on option --------> 
  <select id="quantity" name="quantity" selected="" disabled=""> 
    <option value="0">Choose</option> 
    <option id="q4" value="Quantity-4">4 lessons</option> 
    <option id="q8" value="Quantity-8">8 lessons</option> 
    <option id="q12" value="Quantity-12">12 lessons</option> 
    <option id="q36" value="Quantity-36">36 lessons</option> 
  </select> 
</div> 
<p id="warn">Please, fill in all the fields</p> 
 
<div class="wrap-calc d-flex justify-content-between"> 
  <div id="button-clear" class="submit-block submit-block__culc"> 
    <p>Clear</p> 
  </div> 
  <div id="button-result" class="submit-block submit-block__culc"> 
    <p>Calculate</p> 
  </div> 
</div> 
<div class="wrap-calc"> 
  <div class="submit-block"> 
    <p>This French course costs : <span value="0" id="result-culc"></span> euros</p> 
  </div> 
</div>

$("#length, #duration, #quantity, #validity, #students").change(function(){ 
  $("select").removeClass('sel-color'); 
  $("select").each(function(){ 
    if($(this).val() != 0){ 
      $(this).addClass('sel-color'); 
    } 
  }); 
}):