Как дать класс дочернему элементу конкретного родителя(несколько родителей с одинаковым классом)?

Есть свайпер со слайдами. Все слайды имеют одинаковые классы. В слайдах есть ul, в которой показаны только первые четыре li, а остальные должны показывать после нажатия на кнопку "Подробнее...". Но в прописанном мной JS-коде класс даётся всем li во всех родителях, когда как только надо в слайде где была нажата кнопка.

//HTML
 <div class="swiper-slide first-slide ">
                                <h4>Подготовка к школе</h4>
                                <span class="tenge-price">30 000 тг</span>
                                <div class="age-and-time">
                                    <p>4-6 лет</p>
                                    <p class="mb60"><span>3 занятия</span> в неделю по <span>3 ч.</span></p>
                                    <ul>
                                        <li>Обучение чтению </li>
                                        <li>Письмо</li>
                                        <li>Математика</li>
                                        <li>Английский язык</li>
                                        <li>Развитие речи</li>
                                        <li>Концентрация внимания</li>
                                        <li>Усвоение изучаемого материала</li>
                                        <li>Различные техники запоминания</li>
                                        <li>Развитие логико-математического мышления</li>
                                    </ul>
                                    <button  class="more">Подробнее...</button>
                                    <a href="#">Выбрать</a>
                                </div>
                            </div>
                            <div class="swiper-slide second-slide">
                                <h4>скорочтение</h4>
                                <span class="tenge-price">27 000 тг</span>
                                <div class="age-and-time">
                                    <p>6-15 лет</p>
                                    <p class="mb60"><span>3 занятия</span> в неделю по <span>1 ч.</span></p>
                                    <ul>
                                        <li>Увеличение скорости чтения</li>
                                        <li>Артикуляция</li>
                                        <li>Развитие речи</li>
                                        <li>Развитие внимания</li>
                                        <li>Увеличение поля зрения</li>
                                        <li>Увеличение словарного запаса</li>
                                        <li>Понимание прочитанного</li>
                                        <li>Пересказ</li>
                                        <li>Различные техники понимания</li>
                                        <li>Пробный урок и диагностика БЕСПЛАТНО</li>
                                    </ul>
                                    <a href="#">Выбрать</a>
                                </div>
                            </div>

//CSS
.age-and-time ul li:nth-child(n + 5) {
    display: none;
}
.li_on{
    display: block !important;
}
.more {
    font-family: Commissioner;
    font-size: 24px;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0em;
    color: #018FA3;
    background: transparent;
    border: none;
    margin-bottom: 60px;
}


.more__none{
    display: none;
}

//JS

 var more = $('.more');
   var li_off = $('.age-and-time ul li:nth-child(n + 5)')

   more.click(function(){
    more.toggleClass('more__none');
    li_off.toggleClass('li_on');
   });