jQuery多个显示/隐藏div问题

function ButtonTextTop2() {
    if ($("#green-top2").is(":visible")) {
        $("button").text("Show less...");
    } else {
        $("button").text("Show more...");
    }
}
ButtonTextTop2();
$("button").click(function () {
    $("#green-top2").toggle();
    $("#red-top2").toggle();
    ButtonTextTop2();
});

function ButtonTextTop1() {
    if ($("#green-top1").is(":visible")) {
        $("button").text("Show less...");
    } else {
        $("button").text("Show more...");
    }
}
ButtonTextTop1();
$("button").click(function () {
    $("#green-top1").toggle();
    $("#red-top1").toggle();
    ButtonTextTop1();
});

#red-top1 {
}
#green-top1 {
    display:none;
}
#red-top2 {
}
#green-top2 {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="red-top1">
    Code here
</div>
<div class="green-top1">
    Other code here
</div>

<div class="red-top2">
    Code here
</div>
<div class="green-top2">
    Other code here
</div>

<button class="mybuttontop1">Show more...</button>
<script type="text/javascript">

</script>


<button class="mybuttontop2">Show more...</button>