Javascript 单击多个元素上的jQuery更改图标

如果我有多个带有图标的div，我不想在单击时更改该图标，但在某种程度上，只有我单击的一个图标被替换，同时所有其他图标保持不变。我有手风琴一样，如果我点击第一个手风琴中的图标，不使用相同的点击来关闭它，而是打开第二个手风琴，关闭第一个手风琴，那么第一个手风琴中的图标不会变回默认值

这是所有的数据

根据下面的简单代码，每次单击都会更改clickMore图标，但如果单击second.clickMore first，实际上所有图标都应该更改为默认值，因为我们不知道切换的是哪一个

我的简单JS

$('.clickMore').click(function() {
  $("i", this).toggleClass("fa-info-circle fa-close");
});

还有更简单的HTML

<div class="clickMore">
    <i class="fa fa-info-circle"></i>
</div>

<div class="clickMore">
    <i class="fa fa-info-circle"></i>
</div>

<div class="clickMore">
    <i class="fa fa-info-circle"></i>
</div>

---

您还需要将逻辑应用于

i

元素

$('.clickMore').click(function() {
    ...
    //Toggle class for current element's child 
    $("i", this).toggleClass("fa-info-circle fa-close"); 

    //Remove fa-close and remove fa-info-circle from other elements
    $('.clickMore').not(this).find("i").removeClass("fa-close").addClass("fa-info-circle");
});

---

那把小提琴看起来很好用……你需要吗？我想他的意思是，每当单击新图标时，它不会将其他图标重置为默认值。这里有什么问题吗？