Загрузка данных

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <title>Todo</title>
</head>
<body>
    <div id='todo-app'>
        <h1>My Todo list</h1>
        <form id="add-todo-form" method="post">
            <input id="todo-input" placeholder="Добавьте новый элемент в список" type="text" name="todo-text">
            <button type="submit">Добавить</button>
        </form>
        <ul id='todo-list'>
            
        </ul>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    function addTodo(){
        var input = document.getElementById('todo-input').value

        $.ajax({
                url: 'function.php',
                type: 'POST',
                data: {
                    "add": "add",
                    todo: input
                },
                success: function(response){
                    document.getElementById('todo-list').innerHTML = response
                }
            })
    }

    var submitButton = document.getElementById('add-todo-form')
    submitButton.addEventListener('submit', function(e) {
        e.preventDefault()
        addTodo()
    })
</script>
</html>