Добавить стрелку в многоуровневое меню

Question

Моя идея - поставить стрелку вниз, когда подменю скрыто, и стрелку вверх, когда оно отображается. Проблема в том, что это относится ко всему, а не к соответствующему выпадающему списку. если я нажму на "li", стрелки на каждой из них изменятся. Как я могу сделать так, чтобы изменялся только нажатый «li»? Есть предложения?

HTML КОД:

<link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="menu_lang">
  <a href="#" id="cat"><img src="images/cat.png" height="28" width="28"></a>
  <a href="#" id="es"><img src="images/esp.png" height="28" width="28"></a>
</div>
<div class="centrar">
  <div class="foto">
    <img id="logo" href="index.html" src="images/logo.png">
  </div>
  <div class="menu" id="ca_Cat">
    <nav>
      <li class="empresa"><a>EMPRESA</a></li>
      <ul>
        <li><a>TEXT A<i class="down"></a>
          <ul>
            <li><a href="#" target="_blank">Text A.1</a></li>
            <li><a href="#" target="_blank">Text A.2</a></li>
          </ul>
        </li>
        <li><a>TEXT B<i class="down"></i></a>
          <ul>
            <li><a>TEXT B.1<i class="down"></i></a>
              <ul>
                <li><a href="#" target="_blank">Text B.1.1</a></li>
                <li><a href="#" target="_blank">Text B.1.2</a></li>
              </ul>
            </li>
            <li><a>TEXT B.2<i class="down"></i></a>
              <ul>
                <li><a href="#" target="_blank">TEXT B.2.1</a></li>
                <li><a href="#" target="_blank">TEXT B.2.2</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a>TEXT C<i class="down"></i></a>
          <ul>
            <li><a href="#" target="_blank">TEXT C.1</a></li>
            <li><a href="#" target="_blank">TEXT C.2</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>

CSS КОД:

* {
  padding: 0;
  margin: 0;
}

#logo {
  width: 70%;
  margin-bottom: 5%;
}

nav a {
  text-decoration: none;
}

nav li {
  list-style: none;
}

nav {
  width: 100%;
  letter-spacing: 0.2em;
  background: #f3f3f3;
  text-align: left;
  font-family: 'Rubik', sans-serif;
}

nav li a {
  color: black;
  display: block;
  padding: 10px 0 10px 20px;
  border-bottom: 2px solid #fff;
}

nav ul li a {
  background: #e4e4e4;
  font-weight: bold;
}

nav ul ul li a {
  background: #ccd1d8;
}

nav ul ul li a:hover {
  background: #bfc8d4;
}

nav ul ul li a {
  padding-left: 30px;
  font-weight: normal;
}

nav ul ul ul li a {
  background: #bfcad9;
}

nav ul ul ul li a:hover {
  background: #a3b9d9;
}

nav ul ul ul li a {
  padding-left: 50px;
  font-weight: normal;
}

li>a:only-child:after {
  content: '';
}

.empresa {
  display: block;
  background: #001b3f;
  font-weight: bold;
}

.empresa a {
  color: white;
}

.centrar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  height: 600px;
  margin-top: -200px;
  text-align: center
}

.foto {
  margin: 0px auto;
}

.menu {
  margin: 0px auto;
}

.menu_lang {
  padding: 40px;
  text-align: right;
}

nav .show-subnav {
  display: block;
}

nav li>ul {
  display: none;
}

i {
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 2px;
  margin-bottom: 4px;
  margin-left: 20px;
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

JQUERY КОД:

$(document).ready(function() {
  $("nav li:has(ul) > a").click(function() {
    var $ul = $(this).next("ul").toggleClass("show-subnav");
    $ul.find('ul.show-subnav').removeClass('show-subnav');
    $('nav ul.show-subnav').not($ul.parentsUntil('nav', 'ul').add($ul)).removeClass('show-subnav');
    if ($("i").attr("class") == "down") {
      $("i").attr("class", "up");
    } else {
      $("i").attr("class", "down");
    }
  });

});