Criei uma seção de divs com botão de aparecer e desaparecer o conteúdo das divs ao ser clicado, o script e o html funcionam perfeitamente porém só pro primeiro elemento, quando clico nos demais botões ele altera somente o primeiro elemento. Tipo o java script só funciona para o primeiro Elemento que é encontrado no HTML

A estrutura é essa

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->


    $(function(){
            $(".btn-toggle").click(function(e){
               e.preventDefault();
                el = $(this).data('element');
                $(el).toggle();
            });
        });

<!-- language: lang-css -->

    .btn-toggle{border:1px solid;}

    .btn-toggle:hover{background:yellow;}

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <button type="button" class="btn-toggle" data-element="#minhaDiv">Mostrar / Esconder</button>

    <div class="m1" id="minhaDiv">Conteudo 1</div>

    <button type="button" class="btn-toggle" data-element="#minhaDiv">Mostrar / Esconder</button>

    <div class="m2" id="minhaDiv">Conteudo 2</div>

<!-- end snippet -->

Oque está faltando? Queria que quando clicasse no primeiro elemento mostrasse o conteúdo normal e quando clicar no segundo abrisse o segundo conteúdo da segunda div normal também como se fosse um Acordion.