Переключить каретки FontAwesome при нажатии с помощью jQuery

FontAwesome, похоже, не загружается здесь во фрагментах, поэтому посмотрите этот JSFiddle:

https://jsfiddle.net/e74coz3f/

То, что я пытаюсь сделать, это сначала показать <i class = "fas fa-caret-down"></i> справа от div, а затем переключиться на отображение <i class = "fas fa-caret-up"></i> после нажатия на product-suggestion-form-container div. Они должны переключаться между вверх и вниз каждый раз, когда вы нажимаете на div.

Что я неправильно понимаю в переключении между классами active и inactive в jQuery?

Если я добавлю такие классы active и inactive в CSS:

https://jsfiddle.net/c12tvgdj/

вообще ничего не показывает.

Соответствующий HTML:

<script src = "https://use.fontawesome.com/releases/v5.15.1/js/all.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class = "product-suggestion-form-container">
  <span class = "form-title">Product Suggestion Form</span>
  <span class = "dropdown-arrow-top inactive-1"><i class = "fas fa-caret-down"></i>
  <span class = "dropdown-arrow-up-top active-2"><i class = "fas fa-caret-up"></i>
  </span>
</div>

CSS

/*before toggle*/

.product-suggestion-form-container {
  border: 1px solid #c6c6c6;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  background-color: #f8f7f7;
  cursor: pointer;
}

.dropdown-arrow-top {
  display: block;
}

.dropdown-arrow-up-top {
  display: none;
}

/*after toggle*/

.dropdown-arrow-top.inactive-1 {
  /*display: none;*/
}

.dropdown-arrow-up-top.active-1 {
  /*display: block;*/
}

Javascript:

$(document).ready(function(){
   $(".product-suggestion-form-container").click(function(){
      $(".form-div-top").slideToggle();
      $(".dropdown-arrow-top").toggleClass("inactive-1");
      $(".dropdown-arrow-up-top").toggleClass("active-1");
   })
});