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"><i class="fas fa-caret-down"></i></span>
  <span class="dropdown-arrow-up-top"><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;
}

JavaScript

$(document).ready(function() {
  $(".product-suggestion-form-container").click(function() {
    $(".dropdown-arrow-top").toggle();
    $(".dropdown-arrow-up-top").toggle();
  })
});