Javascript 三个按钮显示相同的内容。怎样

我有三个按钮（单击时，模式显示），其中包含不同的内容（每个按钮都有自己的内容，并且与其他按钮不同），现在无论我单击哪个按钮，它都会显示我添加的最后一个按钮的相同内容。谁能告诉我怎么解决这个问题吗

我需要在星期一之前完成这项工作，因此非常感谢您的快速帮助

<div class="popup1">
    <style>

    /* The Modal (background) */
    .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 30%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
    }

    @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
    }

    /* The Close Button */
    .close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
    }

    .close:hover,
    .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    }

    .modal-header {
    padding: 2px 16px;
    background-color: #5ca6b8;
    color: white;
    }

    .modal-body {padding: 2px 16px;}

    .modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
    }
    </style>

    <!-- Trigger/Open The Modal -->
    <button id="myBtn">Sponsors</button>

    <!-- The Modal -->
    <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
        <span class="close">&times;</span>
        <h2>Our Sponsors</h2>
        </div>
        <div class="modal-body">
        <ul>
            <li>MONG</li>
            <li>SCNG</li>
            <li>Feel Slovenia</li>
        </ul>
        </div>
    </div>

    </div>

    <script>
    // Get the modal
    var modal = document.getElementById("myModal");

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal 
    btn.onclick = function() {
    modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
    modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
    }
    </script>
</div>

<div class="popup2">
        <style>

        /* The Modal (background) */
        .modal2 {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content2 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 30%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
        }

        /* Add Animation */
        @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0} 
        to {top:0; opacity:1}
        }

        @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
        }

        /* The Close Button */
        .close2 {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
        }

        .close2:hover,
        .close2:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
        }

        .modal-header2 {
        padding: 2px 16px;
        background-color: #5ca6b8;
        color: white;
        }

        .modal-body2 {padding: 2px 16px;}

        .modal-footer2 {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
        }
        </style>

        <!-- Trigger/Open The Modal -->
        <button id="myBtn2">My Gear</button>

        <!-- The Modal -->
        <div id="myModal2" class="modal2">

        <!-- Modal content -->
        <div class="modal-content2">
            <div class="modal-header2">
            <span class="close2">&times;</span>
            <h2>My gear</h2>
            </div>
            <div class="modal-body2">
            <ul>
                <li>Nikon D3100</li>
                <li>Sigma 10-20mm f/4</li>
                <li>Nikkor 70-300mm f4-5.6</li>
                <li>Nikkor 18-55mm f/3.5</li>
            </ul>
            </div>
        </div>

        </div>

        <script>
        // Get the modal
        var modal = document.getElementById("myModal2");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn2");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close2")[0];

        // When the user clicks the button, open the modal 
        btn.onclick = function() {
        modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
        modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
        }
        </script>
</div>

<div class="popup3">
        <style>

        /* The Modal (background) */
        .modal3 {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content3 {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 30%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
        }

        /* Add Animation */
        @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0} 
        to {top:0; opacity:1}
        }

        @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
        }

        /* The Close Button */
        .close3 {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
        }

        .close3:hover,
        .close3:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
        }

        .modal-header3 {
        padding: 2px 16px;
        background-color: #5ca6b8;
        color: white;
        }

        .modal-body3 {padding: 2px 16px;}

        .modal-footer3 {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
        }
        </style>

        <!-- Trigger/Open The Modal -->
        <button id="myBtn3">My Hobbies</button>

        <!-- The Modal -->
        <div id="myModal3" class="modal3">

        <!-- Modal content -->
        <div class="modal-content3">
            <div class="modal-header3">
            <span class="close3">&times;</span>
            <h2>My hobbies</h2>
            </div>
            <div class="modal-body3">
            <ul>
                <li>Photography</li>
                <li>Videography</li>
                <li>Traveling</li>
                <li>Racing</li>
            </ul>
            </div>
        </div>

        </div>

        <script>
        // Get the modal
        var modal = document.getElementById("myModal3");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn3");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close3")[0];

        // When the user clicks the button, open the modal 
        btn.onclick = function() {
        modal.style.display = "block";
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
        modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
        }
        </script>
</div>

/*模态（背景）*/
.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：#fefe；
保证金：自动；
填充：0；
边框：1px实心#888；
宽度：30%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
-webkit动画名称：animatetop；
-webkit动画持续时间：0.4s；
动画名称：animatetop；
动画持续时间：0.4s
}
/*添加动画*/
@-webkit关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
@关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
/*关闭按钮*/
.结束{
颜色：白色；
浮动：对；
字号：28px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
.模态标题{
填充：2x16px；
背景色：#5ca6b8；
颜色：白色；
}
.模态体{填充：2px 16px；}
.模态页脚{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}
赞助商
&时代；
赞助商

蒙
SCNG
感受斯洛文尼亚

//获取模态
var modal=document.getElementById（“myModal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
/*模态（背景）*/
.modal2{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.modal-content2{
位置：相对位置；
背景色：#fefe；
保证金：自动；
填充：0；
边框：1px实心#888；
宽度：30%；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
-webkit动画名称：animatetop；
-webkit动画持续时间：0.4s；
动画名称：animatetop；
动画持续时间：0.4s
}
/*添加动画*/
@-webkit关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
@关键帧动画顶点{
从{top:-300px；不透明度：0}
到{顶部：0；不透明度：1}
}
/*关闭按钮*/
.close2{
颜色：白色；
浮动：对；
字号：28px；
字体大小：粗体；
}
.2：悬停，
.2：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
.modal-header2{
填充：2x16px；
背景色：#5ca6b8；
颜色：白色；
}
.modal-body2{填充：2px 16px；}
.1-2{
填充：2x16px；
背景色：#5cb85c；
颜色：白色；
}
我的装备
&时代；
我的装备

尼康D3100
西格玛10-20mm f/4
Nikkor 70-300mm f4-5.6
Nikkor 18-55毫米f/3.5

//获取模态
var modal=document.getElementById（“myModal2”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn2”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“close2”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}
var modal = document.getElementById("myModal");

var modal = document.getElementById("myModal2");

var modal = document.getElementById("myModal3");