JSFiddle - React, Tailwind, and code Playground

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>
  <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;*/
  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(){
              $(".dropdown-arrow-top").toggleClass("inactive-1");
              $(".dropdown-arrow-up-top").toggleClass("active-1");
            })
});