Changer le nom d'une classe

Bonjour,
J'ai un menu sous la forme ci dessous auquel j'aimerai modifier l'icône des boutons <i class="caret-icon fa fa-caret-up"></i> en <i class="caret-icon fa fa-caret-down"></i>et vice versa en fonction du clic.

Problème c'est comment faire ?
J'ai ce script qui modifie bien l'icone mais pour tous les boutons caret.

Code:

1
2
3
4
5
<script>
    $(document).on('click', '.dropdown-btn', function () {
   $(".caret-icon").toggleClass('fa-caret-down fa-caret-up');
})
</script>

Merci !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div class="sidenav">
    <img class="logo" src="/img/logo.png" alt="logo" />
    <a href="/home.aspx"><span class="home">Accueil</span></a>
        <button class="dropdown-btn">Utilisateurs
            <i class="fa fa-user"></i>
        </button>
        <div class="dropdown-container">
            <button class="dropdown-btn">Administration
                <i class="caret-icon fa fa-caret-up"></i>
            </button>
            <div class="dropdown-container">
                <button class="dropdown-btn">Paramètres
                    <i class="caret-icon fa fa-caret-up"></i>
                </button>
                <div class="dropdown-container">
                    <a href="/content/admin/DBManagement.aspx">Gestion de la BDD référence</a>
                    <a href="/content/users/admin/admProfileGenerator.aspx">Générateur de profiles</a>
                    <a href="/content/admin/dbcontacts/DBContactsView.aspx">Contacts</a>
                </div>
                <button class="dropdown-btn">Locks & Reset
                    <i class="caret-icon fa fa-caret-up"></i>
                </button>
                <div class="dropdown-container">
                    <a href="/content/users/admin/admUnlockUser.aspx">Unlock Utilisateurs</a>
                    <a href="/content/users/admin/admUser.aspx">Reset Creation_date</a>
                </div>
                <button class="dropdown-btn">Formulaires
                    <i class="caret-icon fa fa-caret-up"></i>
                </button>
                <div class="dropdown-container">
                    <a href="/content/users/admin/admSvcUser.aspx">Compte de Service</a>
                    <a href="/content/users/admin/admmodUser.aspx">Mod. Utilisateurs</a>
                    <a href="/content/users/admin/admdelUser.aspx">Supprimer Utilisateurs</a>
                    <a href="/content/users/admin/changeowner.aspx">Changer le propriétaire</a>
                </div>
                <a href="/content/users/admin/admMIUsers.aspx">Import en Masse</a>
            </div>
            <a href="/content/users/newUser.aspx">Nouveau</a>
            <a href="/content/users/modUser.aspx">Modification</a>
            <a href="/content/users/delUser.aspx">Suppression</a>
        </div>
        <button class="dropdown-btn">Support
            <i class="fa fa-headset"></i>
        </button>
        <div class="dropdown-container">
            <button class="dropdown-btn">Attribution de profiles
                <i class="caret-icon fa fa-caret-up"></i>
            </button>
            <div class="dropdown-container">
                <a href="/content/support/profiles/help.aspx">Aide</a>
                <a href="/content/support/profiles/profile_mgr.aspx">Attribution de profiles</a>
                <a href="/content/support/profiles/poles.aspx">1. Pôles</a>
                <a href="/content/support/profiles/profile.aspx">2. Profiles</a>
                <a href="/content/support/profiles/groups.aspx">3. Groupes</a>
            </div>
        </div>
        <button class="dropdown-btn">Outils
            <i class="fa fa-screwdriver-wrench"></i>
        </button>
        <div class="dropdown-container">
            <button class="dropdown-btn">Active Directory
                <i class="caret-icon fa fa-caret-up"></i>
            </button>
            <div class="dropdown-container">               
                <a href="/content/tools/ad/adGroupMemberOf.aspx">Membre De...</a>
                <a href="/content/tools/ad/adBUStats.aspx">Stats : Utilisateurs / BU</a>
            </div>
            <button class="dropdown-btn">DHCP
                <i class="caret-icon fa fa-caret-up"></i>
            </button>
            <div class="dropdown-container">               
                <a href="/content/tools/dhcp/dhcp_res.aspx">Réservations DHCP</a>
                <a href="/content/tools/dhcp/dhcp_DEL.aspx">Suppression DHCP</a>
                <a href="/content/tools/dhcp/dhcp_log.aspx">Logs DHCP</a>
            </div>
            <button class="dropdown-btn">Scripts
                <i class="caret-icon fa fa-caret-up"></i>
            </button>
            <div class="dropdown-container">               
                <a href="/content/tools/scripts/scripts.aspx">Scripts</a>
                <a href="/content/tools/scripts/scripts_log.aspx">Logs Scripts</a>
            </div>
        </div>
        <button class="dropdown-btn">Maintenance
            <i class="fa fa-briefcase"></i>
        </button>
        <div class="dropdown-container">
            <a href="/content/admin/exportbdd.aspx">Export BDD</a>
        </div>
</div>
 
<script>
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
 
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
      var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
        dropdownContent.style.display = "none";
    } else {
        dropdownContent.style.display = "block";
    }
  });
}
</script>