How to change the caret when i click the button?

How to change the caret when i click the button?

Hi am using bootstrap 4 and designed menu bar with caret. In that i am facing two issues.

Hi am using bootstrap 4 and designed menu bar with caret. In that i am facing two issues.

1) when i click the button (eg LAPTOP,MObile) dropdown appears but the caret not changed. when i click the caret dropdown appears and caret changed .

2) once i click the menu dropdown appears the arrow changed but when i click another menu from the same menubar

$(document).ready(function () {
                $('.fa-caret-down').on('click', function () {
                    if ($(this).hasClass('fa-caret-down')) {
                        $(this).removeClass('fa-caret-down').addClass('fa-caret-up');
                    } else {
                        $(this).removeClass('fa-caret-up').addClass('fa-caret-down');
                    }
                });
            });
  /* Type 3 */
  .nav-link-type-three {
      padding-right: 2.5rem !important;
      padding-left: 1.5rem !important;
      color: white !important;
      text-decoration: none
  }

.navbar-dark .navbar-nav .show>.nav-link-type-three { color: #232323 !important; text-decoration: none }

.bg-dark-type-three { background-color: #29a4d0 !important; }

/* Default image size */ img {

      max-width: 40px;
      min-height: 40px;
  }

  /* images space */
  .col-md-2 {
      margin-left: 2%;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div > <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item dropdown nav-org">

      &lt;a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        LAPTOP &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; lg &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; sony &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; acer&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; dell&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&amp;q=90&amp;m=6&amp;h=623&amp;w=767&amp;b=%23FFFFFFFF&amp;l=f&amp;f=jpg&amp;o=t&amp;aim=true"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; HP &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        SPEAKERS &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;Mono  &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;jass &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&amp;wid=1250"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;iBall &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;Zebronics &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;Senizer &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;

        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        MOBILES &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; iphone 7&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center "&gt;
                &lt;div&gt;
                  &lt;img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;samsung &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; Motorola &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; iphone 6s&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;redmi &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        CAMARA &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        DESKTOP &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        REFURBISHED &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        ACCESSORIES &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        MOTHERBOARD &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

</nav> </div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


the caret was not changed.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Building a minesweeper game using Javascript, HTML and CSS

In this article, you'll learn how to build minesweeper using JavaScript, HTML and CSS. I also used jQuery, a JavaScript library that is helpful for interacting with html. Whenever you see a function call with a leading dollar sign, that is jQuery at work

Material Login & Signup Form with CSS, HTML and JavaScript

How we can create a login and signup form with the material design using HTML CSS JavaScript? Solution: See this CSS Material Login & Signup Form With jQuery, Material Design Form.

JavaScript Table Filter or Search | How to add Filter In HTML CSS Table

How we can add a search or filter option in an HTML Table using ... Solution: JavaScript Table Filter or Search, Add Filter In HTML CSS Table.