Simultaneously toggle active class in child li and at the same time toggle class in grand-parent div that matches the active child li class

I already know how to toggle the active class within each list item (li) when clicked.

But what I need is to copy the uniquely numbered class from the active li (example: .content-item-3.active) to the grand-parent div (.content-grand-dad) > (.content-grand-dad.content-item-3) when each li is toggled and active.

I do not mind if the code is through JQuery or Vanilla JavaScript.

$(document).ready( function() {
$('.content-item').click(function() {
        $('.content-item.active').removeClass("active");
        $(this).addClass("active");
    });
  }); 

.content-item {
cursor: pointer;
}

.content-item-1.active {
color: red;
}

.content-item-2.active {
color: blue;
}

.content-item-3.active {
color: green;
}

.content-item-4.active {
color: yellow;
}

.content-cousin {
display: none;
}

.content-grand-dad.content-item-1 ~ .content-cousin-1, .content-grand-dad.content-item-2 ~ .content-cousin-2, .content-grand-dad.content-item-3 ~ .content-cousin-3, .content-grand-dad.content-item-4 ~ .content-cousin-4 {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-grand-dad content-item-1">

<ul class="content-column">
  
  <li class="content-item content-item-1 active">
    <p>Line 1</p>
  </li>

   <li class="content-item content-item-2 ">
    <p>Line 2</p>
  </li>


  <li class="content-item content-item-3 ">
    <p>Line 3</p>
  </li>

   <li class="content-item content-item-4 ">
    <p>Line 4</p>
  </li>

</ul>

</div>

<div class="content-cousin content-cousin-1">
<h3>Word 1 </h3>
</div>

<div class="content-cousin content-cousin-2">
<h3>Word 2 </h3>
</div>

<div class="content-cousin content-cousin-3">
<h3>Word 3 </h3>
</div>

<div class="content-cousin content-cousin-4">
<h3>Word 4 </h3>
</div>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/WmyFxjk