How to add class to only one of multiple same elements

Question

I have three same items in the DOM. Exactly what I mean is a wobbling line <span class="caret"></span>

<ul>
  <li class="nav-item-1">
   <a href="#">ITEM 1</a>  
   <span class="caret"></span>
  </li>  
</ul>

<ul>
  <li class="nav-item-2">
   <a href="#">ITEM 2</a>  
   <span class="caret"></span>
  </li>  
</ul>

<ul>
  <li class="nav-item-3">
   <a href="#">ITEM 3</a>  
   <span class="caret"></span>
  </li>  
</ul>

Scenario: I click on the first <span class="caret"></span> gets the class "open", and the rest still has only "caret". I click on the second <span class="caret"></span> gets the class "open", and in the first the class "open" is removed. Is it possible? I wrote something like this:

$(".caret").click(function () {
  $(this).data('clicked', true);
  if ($('.caret').data('clicked')) {
    $(".caret").toggleClass('opened');
  }
});

It works, but all "caret" classes get toggleClass('opened') and I just want it to get the one you click on...

Answer 1

You were on the right track by using $(this) but then reverted back to using $('.caret'). Do this:

$(".caret").click(function () {
     $(this).toggleClass('opened');
});

---

Askers request to close all other .caret classes:

$(".caret").click(function () {
    $(".caret").removeClass('opened');
    $(this).addClass('opened');
});

Answer 2

Your HTML is invalid so it is going to produce wrong HTML Markup in the browser. Not knowing how you actually want it to look, I can not offer a solution on fixing it. Once you get it fixed, The basic code should be

$('.caret').on('click', function () {
    $('.caret.opened') // all the open carets
      .not(this) // removed the one that was clicked
      .removeClass('opened'); // remove the class
    $(this)
      .toggleClass('opened'); // toggle the one that was clicked
      //.addClass('opened'); // if you want it always open
});

if one always has to be opened

$('.caret').on('click', function () {
    $('.caret.opened') // all the open carets
      .removeClass('opened'); // remove the class
    $(this)
      .addClass('opened'); // set clicked to open
});

Answer 3

I have a feeling you might have meant this

having a span in a UL is invalid HTML

$(".nav-item a").on("click",function(e) {
  e.preventDefault();
  $(".caret").removeClass('opened');
  $(this).next(".caret").addClass('opened'); // could toggle if needed
});

.caret::after { content: "🡁" }
.opened::after { content: "🠿" }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="nav-item" id="nav-1"><a href="#">ITEM</a><span class="caret"></span></li>
</ul>
<ul>
  <li class="nav-item" id="nav-2"><a href="#">ITEM</a><span class="caret"></span></li>
</ul>

<ul>
  <li class="nav-item" id="nav-3"><a href="#">ITEM</a><span class="caret"></span></li>
</ul>