如何打开具有多个按钮但保持相同内容的模型？

Question

我试图让不同的按钮使用相同的模型，但仍然具有相同的内容。第一个按钮有效但第二个按钮没有。 有人能帮忙吗？

使用Javascript：

function btnHero() {
    var modal = document.getElementsByClassName("heroClass");
    var btn = document.getElementsByClassName("btn2");
    var span = document.getElementsByClassName("close");

    for (let i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
            modal[i].style.display = "block";
        }
    }
    for (let i = 0; i < span.length; i++) {
        span[i].onclick = function () {
            modal[i].style.display = "none";
        }
    } 
    window.onclick = function () {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

这是按钮的示例：

<div class="dropContent1">
                <!--phase 2 Start-->
                <div class="drop2">
                    <a class="btn2" id="heroGK" onclick="btnHero()">Phase II: Place Heroes</a>
                </div>
                <!--phase 3 Start-->
                <div class="drop3">
                    <a class="btn2" id="cardGK" onclick="btnGKcard()">Phase III: Draw Event Cards</a>
                </div>
                <!--phase 4 start-->
                <div class="drop4">
                    <a class="btn4">Phase IV: Action Phase</a>
                    <div class="dropContent4">
                        <a>Perform Army/Hero Actions</a>
                        <a>Heal Units</a>
                        <a>Raise New Units/Armies</a>
                        <a>Place Newly Allied Armies</a>
                    </div>
                </div><!--phase 4 end-->
            </div><!--drop1-->
        </div><!--top-->
        <div class="drop1" id="player2">
            <a class="btn1" onclick="NY()">
                <img src="image/shield/Nyrond.png" alt="Nyrond" width="35" height="35" style="padding-top:5px;" />
            </a>
            <div class="dropContent1">
                <!--phase 2 Start-->
                <div class="drop2">
                    <a class="btn2" onclick="btnHero()">Phase II: Place Heroes</a>
                </div>