display button into html form failed with initialize

My script doesn’t work well.
When the button “b5” clicked with ouside <form …> … element, the buttons b5 and b4 deseapper and the buttons b1,b2,b3 appear. This work normaly when my code about button is not inside the <form …> … element…
When i put inside and i press or click the button b5, it reverses. It means i still get the buttons b4 and b5. Please help.

<form action="" method="POST" enctype="multipart/form-data"\>
{% csrf_token %}
<div class="row"\>
<div class="col-md"\>
<div class="card card-body" \>
<h5\>Informations\</h5\>
<hr\>
<p\>Nom:\</p\>
<fieldset\>
<input name="LibELE_GROUPE" type="text" id="LibELE_GROUPE" value="{{groupe.LibELE_GROUPE}}" size="35"
placeholder="Nom du groupe" tabindex="1" required\>\*
</fieldset\>

            </div>   
        </div>
    
        <div class="col-md">
            <div class="card card-body" style="width:300px; margin-left:40%;">
                <h5>Total des Utilisateurs</h5>
                <hr>
                <h1 style="text-align: center;padding: 10px"></h1>
            </div>
        </div>
    
    
        <div class="col-md">
            <div class="card card-body" style="width:200px; margin-left:50%;">
                <!--<h5>Client:</h5>-->
    
                <hr>
    
                {% if sEtat == "crea" %}
                <a class="btn btn-outline-success  btn-sm btn-block" href=""
                   style="font-size: 10px; ">Ajouter</a>
                <a class="btn btn-outline-info  btn-sm btn-block" href="" style="font-size: 10px;">Quitter</a>
                {% elif sEtat == "modif" %}
                <button class="b3  btn-outline-warning  btn-sm btn-block " href=""
                        style="font-size: 10px;display:None;">
                    Modifier
                </button>
                <button class="b2  btn-outline-danger  btn-sm btn-block " href=""
                        style="font-size: 10px; display:None;">
                    Supprimer
                </button>
                <button class="b1  btn-outline-secondary  btn-sm btn-block " href=""
                        style="font-size: 10px; display:None;">
                    Annuler
                </button>
                <button class="b4 btn-outline-success  btn-sm btn-block" id="AJ" name="Ajouter" type="submit"
                        value="Submit"
                        style="font-size: 10px; ">Ajouter
                </button>
                <button class="b5 btn-outline-info  btn-sm btn-block" id="QT" href="" style="font-size: 10px; ">Quitter
                </button>
    
                {% else %}
                <a class="btn btn-outline-success  btn-sm btn-block" href=""
                   style="font-size: 10px; ">Ajouter...</a>
                <a class="btn btn-outline-info  btn-sm btn-block" href="" style="font-size: 10px;">Quitter</a>
                {% endif %}
    
            </div>
    
        </div>
    
    </div>
    <script>
                                const buttons = document.getElementsByTagName("button");
    
                                var clicked = false
                                var b1 = document.querySelector(".b1")
                                var b2 = document.querySelector(".b2")
                                var b3 = document.querySelector(".b3")
                                var b5 = document.querySelector(".b5")
    
                                function hideButtons( button1, button2, button3) {
                                    clicked = false
                                    for (button of buttons) {
                                        button.style.display = "inline";
                                    }
                                    button1.style.display = (clicked ? "inline" : "none")
                                    button2.style.display = (clicked ? "inline" : "none")
                                    button3.style.display = (clicked ? "inline" : "none")
                                    clicked = !clicked
                                }
                                b1.addEventListener("click", () => {hideButtons(b2, b3, b1)})
    
                                function hideButtons1( button1, button2, button3) {
                                    clicked = false
                                    for (button of buttons) {
                                        button.style.display = "none";
                                    }
                                    button1.style.display = "inline";
                                    button2.style.display = "inline";
                                    button3.style.display = "inline";
                                    clicked = !clicked
                        }
    
    
                                b5.addEventListener("click", () => {hideButtons1(b1, b2, b3)})
    
    </script>

</form\>

You need to sign in to view this answers