Adding and removing classes on mutiple divs

Question

I have a list of items. The first item automatically has the class "active". When clicking another item in this list the class "active" is removed from the first item and added to the clicked item in the list. So far, so good.

But, I want another div to add/remove a class based on the clicked item in the list.

For example

List Item 1 has class "active" > Div Item 1 also has class "active"

Clicking on list item 3: List Item 1 class "active" is removed and added to list item 3 > Div Item 1 class "active" is removed and added to div 3

So far I have this:

$('.case-1').addClass('active-case');
$('#case-1').addClass('active');

$("#carousel-nav ul li").click(function(){
$('#carousel-nav ul li.active').not(this).removeClass('active');
$(this).toggleClass('active');
})    

But I can't find a way to achieve the addClass matching list item and div.

HTML:

<div id="carousel-nav">
<ul>
    <li id="case-1"><a href="#"></a></li>
    <li id="case-2"><a href="#"></a></li>
    <li id="case-3"><a href="#"></a></li>
    <li id="case-4"><a href="#"></a></li>
    <li id="case-5"><a href="#"></a></li>
    <li id="case-6"><a href="#"></a></li>
    <li id="case-7"><a href="#"></a></li>
</ul>
</div>


<div id="case-wrapper" class="case-1> /* Post */ </div>
<div id="case-wrapper" class="case-2> /* Post */ </div>
<div id="case-wrapper" class="case-3> /* Post */ </div>
<div id="case-wrapper" class="case-4> /* Post */ </div>
<div id="case-wrapper" class="case-5> /* Post */ </div>
<div id="case-wrapper" class="case-6> /* Post */ </div>
<div id="case-wrapper" class="case-7> /* Post */ </div>

Answer 1

NEVER assing the same id more than once in the same document. I would suggest to change the markup as shown below:

<div id="carousel-nav">
<ul>
    <li id="case-1" class="list-item-class" data-number="1"><a href="#"></a></li>
    <li id="case-2" class="list-item-class" data-number="2"><a href="#"></a></li>
    <li id="case-3" class="list-item-class" data-number="3"><a href="#"></a></li>
    <li id="case-4" class="list-item-class" data-number="4"><a href="#"></a></li>
    <li id="case-5" class="list-item-class" data-number="5"><a href="#"></a></li>
    <li id="case-6" class="list-item-class" data-number="6"><a href="#"></a></li>
    <li id="case-7" class="list-item-class" data-number="7"><a href="#"></a></li>
</ul>
</div>


<div id="case-wrapper-1" class="div-class" data-number="1"> /* Post */ </div>
<div id="case-wrapper-2" class="div-class" data-number="2"> /* Post */ </div>
<div id="case-wrapper-3" class="div-class" data-number="3"> /* Post */ </div>
<div id="case-wrapper-4" class="div-class" data-number="4"> /* Post */ </div>
<div id="case-wrapper-5" class="div-class" data-number="5"> /* Post */ </div>
<div id="case-wrapper-6" class="div-class" data-number="6"> /* Post */ </div>
<div id="case-wrapper-7" class="div-class" data-number="7"> /* Post */ </div>

Use data-number attributes to match a list item with it's respective div element.

jQuery

$(document).on('click', '.list-item-class', function() {
   var that = $(this);
   var thisNum = that.attr('data-number');
   $('li[id^=case-]').removeClass('active');
   $('.div-class').removeClass('active');
   that.addClass('active');
   $('.div-class').filter('[data-number="' + thisNum  + '"]').addClass('active');
});

Answer 2

Your case wrapper divs are semantically incorrect, there can only be one id for one element on the page. If you wrap all of those divs in one div and give that one div the id, then you can do this:

$('#carousel-nav ul li a').on('click', function(e){
  // you should really use buttons here instead of preventing default behavior
  e.preventDefault();
  //this line gets the li that is active and the element clicked and toggles the classes between them (removes active from active and adds active to clicked), returns the index of the new active selection.
  $(this).parent().siblings('.active').addBack().toggleClass('active');
  //this goes through all the divs in the case-wrapper and removes the active class from them. Then it finds the element with the same index of the active class from the nav and applies the active class
  $('#case-wrapper > div').removeClass('active').eq($('#carousel-nav ul li.active').index()).addClass('active');
})

.active, .active > *{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="carousel-nav">
<ul>
    <li id="case-1" class="active"><a href="#">1</a></li>
    <li id="case-2"><a href="#">2</a></li>
    <li id="case-3"><a href="#">3</a></li>
    <li id="case-4"><a href="#">4</a></li>
    <li id="case-5"><a href="#">5</a></li>
    <li id="case-6"><a href="#">6</a></li>
    <li id="case-7"><a href="#">7</a></li>
</ul>
</div>

<div id="case-wrapper" >
  <div class="case-1 active"> /* Post */ </div>
  <div class="case-2"> /* Post */ </div>
  <div class="case-3"> /* Post */ </div>
  <div class="case-4"> /* Post */ </div>
  <div class="case-5"> /* Post */ </div>
  <div class="case-6"> /* Post */ </div>
  <div class="case-7"> /* Post */ </div>
</div>

Answer 3

There could be many ways to do this. But the following snippet achieves the goal by making minimum changes in your existing code.

$(document).ready(function() {
  $('.case-1').addClass('active-case');
  $('#case-1').addClass('active');

  $("#carousel-nav ul li").click(function() {
    $('#carousel-nav ul li.active').not(this).removeClass('active');
    $(this).toggleClass('active');
 var divClass = $(this).attr('id')
 $('div').removeClass('active-case');
 $('.' + divClass).addClass('active-case');
  });
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel-nav">
  <ul>
    <li id="case-1">
      <a href="#"></a>
    </li>
    <li id="case-2">
      <a href="#"></a>
    </li>
    <li id="case-3">
      <a href="#"></a>
    </li>
    <li id="case-4">
      <a href="#"></a>
    </li>
    <li id="case-5">
      <a href="#"></a>
    </li>
    <li id="case-6">
      <a href="#"></a>
    </li>
    <li id="case-7">
      <a href="#"></a>
    </li>
  </ul>
</div>

<div id="case-wrapper1" class="case-1"> /* Post */ </div>
<div id="case-wrapper2 " class="case-2">/* Post */</div>
<div id="case-wrapper3" class="case-3"> /* Post */ </div>
<div id="case-wrapper4 " class="case-4">/* Post */</div>
<div id="case-wrapper5" class="case-5"> /* Post */ </div>
<div id="case-wrapper6 " class="case-6">/* Post */</div>
<div id="case-wrapper7" class="case-7"> /* Post */ </div>