【JavaScript】appendChildが上手くできず、下に追加されていくのではなく、上書きのように最初のリストの上から重なってしまいます。

前提・実現したいこと

初めて質問を投稿させて頂きます。
現在、カウントダウンタイマー付きTodoリストというアプリを作成しております。
使用言語は、HTML・CSS・JavaScriptです。

タイマーの部分はなんとかできたのですが、Todoリストの部分でつまづいております。
入力欄にタスクを入力し、追加ボタンを押すと、
リスト状(黒丸なし)にタスクが追加されていく機能を作っております。
下に追加されていく、appendChildでリストに追加する手法を使っているのですが、
タスクを入力してみて、追加ボタンを押すと、
下に追加されるのではなく、上書きされてしまいます。
なんとか、きちんとappendChildを機能させ、どんどん下に追加させるように
したのですが、何か良い方法をご存知の方はいらっしゃいますでしょうか？
ご回答頂けましたら、幸いです。よろしくお願いいたします。

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

コンソールにエラーメッセージの表示はありません。

該当のソースコード

①HTMLファイル

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>Countdown To Do List</title>
6        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
7        <link rel="stylesheet" href="stylesheet.css">
8    </head>
9    <body>
10        〜中略〜
11            <div class="input-text">
12                <h2 class="content-title">LISTS</h2>
13                <input type="text" placeholder="タスクを入力してください" id="newtodo">
14                <button type="button" id="add-button">追加</button>
15            </div>
16            <ul id="my-list">
17                <li>buy a cake</li>
18            </ul>
19            <footer>
20                <p class="footer">&copy;All rights reserved by Azusa Okamoto.</p>
21            </footer>
22        <script src="timer.js"></script>
23        <script src="todolist.js"></script>
24    </body>
25</html>
26

②JavaScriptファイル(Todoリスト用)
こちらの、li.appendChild(t)がきちんと動作していないのではと、推測しております。

JavaScript
1
2// タスク追加
3
4document.getElementById("add-button").onclick=function () {
5    var li = document.createElement("li");
6    var inputValue = document.getElementById("newtodo").value;
7    var t = document.createTextNode(inputValue);
8    if (inputValue === '') {
9        alert("タスクを入力してください！");
10    }
11    else {
12        document.getElementById("my-list").appendChild(li);
13        li.appendChild(t);
14    }
15    
16    document.getElementById("newtodo").value = ""; 
17    
18    var span = document.createElement("SPAN");
19    var txt = document.createTextNode("\u00D7");
20    span.className = "close";
21    span.appendChild(txt);
22    li.appendChild(span);
23
24    for (i = 0; i < close.length; i++) {
25        close[i].onclick = function() {
26            var div = this.parentElement;
27            div.style.display = "none";
28        }
29    }
30}
31

試したこと

appendChildの部分を、insertBeforeに変更してみたり、
id名ではなく、querySelectorで選択してみたりもしました。
直前で、変数inputValueやtを宣言する時に.valueの位置等を変更してみたりしました。
ずっと考えすぎても、いつまでも動けないままになってしまうので、
質問させて頂きました。

補足情報（FW/ツールのバージョンなど）

使用しているツール
MacBook Pro
VS Code
Google Chrome

YakumoSaki

2020/06/29 11:39

手元のChromeで、貼って頂いたHTMLの <script src="todolist.js"></script> の部分に貼って頂いているJavascriptをそのまま入れて実行してみましたが、TODOの追加が出来ました。ブラウザの開発者ツールでデバッグ実行などを試してみると解決のヒントがあるかもしれません。