zanzoS

Так document.querySelector и выбирает первый элемент, удовлетворяющий поиску. Чтобы добавить действие всем элементам с классом btn-more нужно использовать document.querySelectorAll, который возвращает массивоподобную коллекцию, по которой можно пробежать мапом и навесить действие. Но, основная сложность будет в том, чтобы каждой кнопке сопоставить свои элементы, которые нужно скрывать\показывать. Нужно либо добавить им дополнительные атрибуты с одинаковым значением для каждой группы либо по структуре DOM дерева выбирать нужные.

только на первую кнопку

...

querySelector

querySelector() находит и отдаёт первый элемент, подходящий селектору. Остальные остаются вне игры.

Зато querySelectorAll() выберет все подходящие. Но потом коллекцию (NodeList) надо обходить циклом. Например,

querySelectorAll(...).forEach(item => что-то-сделать-с-item)

.

Альтернатива — слушать клики выше в дереве, в общем родителе. Проверять, что кликнули именно button.btn-more, дальше исходя из этой кнопки находить в DOM-дереве ближайшие элементы, которым надо менять классы. Делегирование событий.

Допустим, у вас каждый блок расположен в элементе с классом .portfolio

<div class="portfolio"><button class="btn-more">подробнее</button>...</div>
<div class="portfolio"><button class="btn-more">подробнее</button>...</div>
<div class="portfolio"><button class="btn-more">подробнее</button>...</div>

// Это не нужно. К body можно обратиться напрямую document.body
//const bodyPortfolio = document.querySelector('body');

[...document.querySelectorAll('.portfolio')].forEach(function(item){

  const caseBtn = item.querySelector('.btn-more');
  const caseCloseBtn = item.querySelector('.close__content');
  const caseContent = item.querySelector('.portfolio__content');

  caseBtn.addEventListener('click', (event) => {
    event.stopPropagation();
    caseContent.classList.add('case__active');
    document.body.classList.add('overflowhidden');
  });

  caseCloseBtn.addEventListener('click', (event) => {
    event.stopPropagation();
    caseContent.classList.remove('case__active');
    document.body.classList.remove('overflowhidden');
  });

});

С Jquery есть отличный Slick Slider
Без него сейчас популярен SwiperJS

Работают как с инлайн так и с ajax контентом. А вообще много их разных, писать с нуля нет никакой необходимости как по мне

С плагинами квиза для js почему-то туго в плане наличия и популярности, в отличии от тех же слайдеров, поэтому люди пишут самописные, если помог, отметь пожалуйста ответом
https://opttour-ru.turbopages.org/opttour.ru/s/scr...
https://youtu.be/oftMxBC1BCk
https://qna.habr.com/q/908553

Если у вас эти кнопки расположены внутри tab-а, значит они должны быть внутри каждого.
А скрипт будет такой:

$('.btn__arrow__stroke').click(function() {
    
    let tabsContent = $(this).closest('.tab_content.active');
    let tabsToggler = $(this).closest('.tab_container').prev().find('li.active');
    let dir = $(this).text().trim() == 'Пред.' ? 'prev' : 'next';

    if (dir == 'prev') {
        if (tabsToggler.prev().length) {
            tabsToggler.prev().addClass('active').siblings().removeClass('active');
            tabsContent.prev().show().addClass('active').siblings().hide().removeClass('active');
        }
    } else {
        if (tabsToggler.next().length) {
            tabsToggler.next().addClass('active').siblings().removeClass('active');
            tabsContent.next().show().addClass('active').siblings().hide().removeClass('active');
        }
    }
});

$('.experts_name').click(function() {
	$(this).next('.experts_data').css("display", $(this).next('.experts_data').css("display")=='none' ? 'block' : 'none' );
})