How can i tell the javascript in this html code not to influence all the buttons?

I have created a html website with bootstrap and jquery. I wanted, that a button change his label text and his design depending on a boolean variable. That worked with javascript. But I have this button (in green and blue) all over the page. Now either all buttons appear green or all buttons appear green.

Here is an example of what I mean with two buttons:

<div class="alert alert-danger" role="alert">
                                        <center><strong></strong></center>
                                    </div>

                                    <script>
                                        var open = true;

                                        if (open) {
                                            $(".alert").addClass("alert-success");
                                            $(".alert").removeClass("alert-danger");
                                            $(".alert").html("<center><strong>Geoeffnet</strong></center>");
                                        } else {
                                            $(".alert").removeClass("alert-success");
                                            $(".alert").addClass("alert-danger");
                                            $(".alert").html("<center><strong>Geschlossen</strong></center>");
                                        };

                                    </script>


<div class="alert alert-danger" role="alert">
                                        <center><strong></strong></center>
                                    </div>

                                    <script>
                                        var open = false;

                                        if (open) {
                                            $(".alert").addClass("alert-success");
                                            $(".alert").removeClass("alert-danger");
                                            $(".alert").html("<center><strong>Geoeffnet</strong></center>");
                                        } else {
                                            $(".alert").removeClass("alert-success");
                                            $(".alert").addClass("alert-danger");
                                            $(".alert").html("<center><strong>Geschlossen</strong></center>");
                                        };

                                    </script>

How can I stop, that this two buttons always have the same features?

Thank you, you help me a lot!