Como Expandir e Retrair texto/ botão 'leia mais' no javascript

Vi esse exemplo simples de como fazer isso, porém ele não é automatizado, minha dúvida é como fazer ele para que seja aplicável aos outros leia mais, sem que entre em conflito entre si, o código:

HTML5

<div class="carrossel owl-carousel">
                    <div class="conquista">
                        <div class="conquistaCaixa">
                            <img src="img/logos/tata-consultancy-services-logo-tcs.png" alt="logo tata consultancy services">
                            <div class="tituloConquista">
                                Tata Consultancy Services (TCS)
                            </div>
                            <p>Vencedor do primeiro hackathon em parceria com a FIEB.<span id="tresPontos">...</span><span id="mostrarMais"><br><br>A proposta era desenvolver um aplicativo para smartphone sobre educação em 5 dias, desenvolvi com pessoas que não conhecia até então, mas com trabalho em equipe vencemos esse desafio.<br><br>Isso aconteceu em 2017, foi o meu primeiro contato com a programação.</span></p>
                            <button onclick="leiaMais()" id="btnLeiaMais" class="btnLeiaMais">Leia Mais</button>
                        </div>
                    </div>
                    <div class="conquista">
                        <div class="conquistaCaixa">
                            <img src="img/logos/autocad-logo.png" alt="AutoCAD logo">
                            <div class="tituloConquista">
                                Domínio completo do AutoCAD
                            </div>
                            <p>Ao final do meu curso, em 2017 dominei completamente a ferramenta.</p>
                        </div>
                    </div>
</div>

JavaScript

function leiaMais() {
    const tresPontos = document.getElementById('tresPontos');
    const mostrarMais = document.getElementById('mostrarMais');
    const btnLeiaMais = document.getElementById('btnLeiaMais');

    if (tresPontos.style.display === 'none') {
        tresPontos.style.display = 'inline';
        mostrarMais.style.display = 'none';
        btnLeiaMais.innerHTML = 'Leia Mais';
    } else {
        tresPontos.style.display = 'none';
        mostrarMais.style.display = 'inline';
        btnLeiaMais.innerHTML = 'Leia Menos';
    }
}

CSS

.mostrarMais {
    display:none;
}