[Fankrai]

Здравствуйте. Я только познакомился с js, т.к занимаюсь версткой. У меня есть 6 кнопок READ MORE на сайте.
Я создал файлик main.js и написал скрипт для первой кнопки. Всё отлично, текст скрывается и показывается, но когда я по такому же принципу пишу для других кнопок - открывается та первая! Создал новый файл js и написал для другой кнопки - сработало. Предполагаю, что я что-то не понимаю и надо делать как-то по-другому. Не могли бы вы мне подсказать, где я ошибся и как написать повторение, но для других кнопок, что бы я не создавал 6 отдельных js файлов?

<p class="section-heading1--text">
					Lorem ipsum dolor  mero moleamet,
					soluta euism od isea, hiea unereusams
					ullu tpamco detore  aer rper quo, utam
					signiferuuue uo. Brute inani in prom in
					<span class="content hidden">Lorem ipsum dolor  mero moleamet,
					soluta euism od isea, hiea unereusams
					ullu tpamco detore  aer rper quo, utam
					signiferuuue uo. Brute inani in prom in</span></p>
					<button class="btn" type="button">READ MORE</button>

[CSS]hidden {
display: none;
}

const btn = document.querySelector(".btn");
const content = document.querySelector(".content");

btn.addEventListener("click", btnClick);

function btnClick() {
    console.log(content.classList);

    if (content.classList.contains("hidden")) {
        btn.textContent = "HIDE";
    } else {
        btn.textContent = "READ MORE";
    }

    content.classList.toggle("hidden");
}

Если не сложно, то объясните что и как, поподробнее. Большое спасибо!