почему не удаляет предедущий активный класс при нажатии буттона
$('.nav-item button').click(function () {
$(this).parent().children('span').removeClass('active-line');
$(this).parent().children('span').addClass('active-line');
});
.active-line{
width: 50px;
height: 3px;
background-color: #E18848;
display: inline-block;
position: absolute;
margin-left: 10px;
transition: all .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<i class="fas fa-calendar-alt week-calendare"></i>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">ԵՐՔ
</button>
<span class="week-orange-line active-line"></span>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">ՉՐՔ
</button>
<span class="week-orange-line"></span>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">ՀՆԳ
</button>
<span class="week-orange-line "></span>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab1" data-bs-toggle="pill" data-bs-target="#pills-contact1" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">ՈՒՐԲ
</button>
<span class="week-orange-line "></span>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab2" data-bs-toggle="pill" data-bs-target="#pills-contact2" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">ՇԲԹ
</button>
<span class="week-orange-line"></span>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab3" data-bs-toggle="pill" data-bs-target="#pills-contact3" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">ԿԻՐ
</button>
<span class="week-orange-line"></span>
</li>
</ul>