HTML内にscriptを記載して思っているようにしたいのですが、どうしても上手くいきません。どなたかご教授よろしくお願いします。


以下の四つの事が出来るようになりたいのですが、HTMLのタグの中のscriptタグの中にコードを書いてるのですがどうしてもどのようなコードを書けば良いかわかりません。  
どなたかご教授ください。

1つ目:名前とニックネームを3回追記したらボタンを非表示（削除ではないのでDisplayではないとは思いますが）にし、それ以降は追記できない。

2つ目:tableタグとそれに関連するタグを利用し、登録した 名前 と ニックネーム を最大3人分までテーブル表示できるようにする。

3つ目:名前とニックネームの追加時、各行の右端に削除ボタンを出力させて、ボタンをクリックすると  
ボタンがある行を削除する処理を作成する。

4つ目(ラスト):データを3件登録して追加ボタンを消すようにしたが、削除ボタンでデータが削除され3件未満になった場合は追加ボタンを再表示させ、3件になるまで追加し直せるようにする。

☟☟☟ 以下にHTMLコードを記載

[code]

    <!DOCTYPE html>
    <html>
        <head>
            <title>アカウント登録</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
            <style>
              .base {
                margin: 2% 7% 0;
                height: 500px;
                background: blue;
                padding: 5% 10%;
                box-shadow: 5px 9px 8px 5px rgba(0, 0, 0, 0.5);
              }
              input {
                width: 300px;
                height: 40px;
                font-size: large;
              }
              #tuikaBtn {
                background: green;
              }
              h1 {
                font-family: serif;
              }
              .form-control::placeholder {
                  color: #cacaca;
                  opacity: 1;
              }
              table {
                border-collapse: collapse; 
              }
    
              th,td {
                border: 1px solid #312929;
                padding: 5px 10px;
              }
              .card {
                width: 100%;
                height: 350px;
              }
              .back{
                padding: 30px;
                position: absolute;
                bottom: 0;
                right: 0;
              }
              .form-group{
                margin: 10px 0 15px 0px;
              }
              #result {
                font-size: 120%;
                margin: 10;
                margin: 10px 20px;
                padding: 10px 5px 20px;
                margin: 10px 5px 10px 5px;
              }
    
              .row .card{
                color: red;
              }
    
              .card{
                color: blue;
                display: block;
                position: relative;
              }
    
              #modal{
                display: none;
                margin:1.5em auto 0;
                background-color: white;
                border: 1px solid black;
                width: 50%;
                padding: 10px 20px;
                position: fixed;
                border-radius: 5px;
              }
    
              #overLay{
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 120%;
                background-color: rgba(0,0,0,0.75);
              }
    
            </style>
        </head>
        <body>
            <div class="base container">
              <div class="row">
                <h1>アカウント登録</h1>
              </div>
              <div class="row">
                <div class="card" id="card">
                  <div class="card-block">
                    <form id="form-area" class="form-inline" method="post">
                        <div class="form-group">
                            <div class="input-group">
                              <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
                            </div>
                        </div>
    
                        <div class="form-group">
                          <input id="tuikaBtn" type="button" name="touroku" value="追加">
                        </div>
    
                    </form>
                    <div id="tuikaMoto">
    
                    </div>
                    <div id="result"></div>
                  </div>
                </div>
              </div>  
            </div>
          </div>
          <div id="overLay">
          </div>
            <script>
              
    let result = document.getElementById('result'); 　 
    let display = document.getElementById("tuikaBtn"); 
    　
        window.addEventListener('DOMContentLoaded', () => {　　
        display.addEventListener('click', function () {
    
            
    let namae = document.getElementById("namae");
    let nickname = document.getElementById("nickname");
    
        if (namae.value === "" || nickname.value === "") { return false; }
        if (window.confirm(namae.value + "さん " + nickname.value + "を登録します。よろしいですか？")) {
    result.innerHTML += "<br>" + namae.value + ": " + nickname.value;
    }else { return false; }
    
    alert(namae.value + 'さん' + nickname.value + 'にて登録しました。');
    
    result.value = `${namae},${nickname}`; 
    if(namae.value == "" || nickname.value == "") return false;
    })
    })
            </script>
        </body>
    </html>
    
[/code]

