HTMLでのボタンの表示について

前提・実現したいこと

HTML、Javascript、CSSについての質問です。
タイピングゲームの作成をしており、そのチュートリアルを作っている段階なのですが、利用者に内容を理解してもらった後ボタンを押すことで画面遷移をしようと考えているのですが、そのためのボタンの設定がうまくいかず困っています。

発生している問題・エラーメッセージ

具体的にはもともと五つのボタンを用意しておき、それらを交代で表示させることで別々の行動をしようとしています。

最初はCSSからvisibilityで5つのうち4つのボタンをhiddenにしておき最初の入力とともにJavascriptからdisplay：noneで消すことでボタンの位置を毎回中央に表示するようにしていたのですが、その後表示するためのコマンドがわからずいろいろ試した結果、実装できずにあきらめました。
そこで代わりに毎回CSSで中央に表示するようにして毎回visibilityでの表示の切り替えを試みたのですが、CSS自体の作動は確認できるもののうまくはいかなかったので質問するに至りました。

以下、ソースコードの一部です。
はじめての質問で至らない点が多々あると思いますので、いろいろ教えて下さると幸いです。

該当のソースコード

HTML
1        <input type="button" id="next_button1" value="次へ" onclick="next1()">
2        <input type="button" id="next_button2" value="次へ" onclick="next2()">
3        <input type="button" id="next_button3" value="開始する" onclick="next3()">
4        <input type="button" id="next_button4" value="次へ" onclick="next4()">

#next_button1 {
    margin-left: auto;
    margin-right: auto;
    width: 8em;
    visibility: hidden; 
}
#next_button2 {
    margin-left: auto;
    margin-right: auto;
    width: 8em;
    visibility: hidden; 
}
#next_button3 {
    margin-left: auto;
    margin-right: auto;
    width: 8em;
    visibility: hidden; 
}
#next_button4 {
    margin-left: auto;
    margin-right: auto;
    width: 8em;
    visibility: hidden; 
}

javascript
1function tutorial(){
2                                     console.log("tutorialt");
3        score = 0.0;
4		mistake = 0;
5		correct = 0;
6		scoredis_tu.innerHTML="";
7        tutorial1.innerHTML="これが対戦画面になります"
8        playerlife_tu.innerHTML="mylife = " + mylife + "　　　　hislife = " + hislife;
9        tutorial_button.style.visibility ="hidden";
10        next_button1.style.visibility ="visible"; 
11		next_button2.style.visibility ="hidden";
12		next_button3.style.visibility ="hidden";
13		next_button4.style.visibility ="hidden";
14		tutorial_flag = false;
15		readytime_tu = 5;
16		count_tu.innerHTML=readytime;
17		txt.innerHTML="下に表示されているのがお互いのライフとカウントダウンです。";
18}
19function next1(){
20        tutorial1.innerHTML="ライフがなくなったら負けになります";
21        txt.innerHTML="カウント終了後、相手と同時にタイピングを始めます";
22        next_button1.style.display ="none";
23        next_button2.style.visibility ="visible"; 
24}
25function next2(){
26        tutorial1.innerHTML="表示されたお題を早く打ち切った方の勝利です。";
27        txt.innerHTML="それでは、実際にやってみましょう";
28        next_button2.style.display ="none";
29        next_button3.style.visibility ="visible"; 
30}