JS task adding to a html page

function popUpWindow() {
    var addTaskPopUp = document.getElementsByClassName('addTaskPopUp')[0];
    var addTaskBtn = document.getElementById('addTask-btn');
    var close = document.getElementsByClassName('close')[0];

    addTaskPopUp.style.display = 'block';

    close.addEventListener('click', function () {
        addTaskPopUp.style.display = 'none';
    });

    window.addEventListener('click', function (e) {
        if (e.target == addTaskPopUp) {
            addTaskPopUp.style.display = 'none';
        }
    });
}
function addTask() {
    var taskName = document.getElementById('taskName').value;
    var taskDate = document.getElementById('taskDate').value;
    var taskContainer = document.querySelector('.task-container');
    var task = document.createElement('div');
    task.className = 'task';
    task.innerHTML = '<input type="checkbox" id="task2" name="task2" value="task2"><label for="task2">'+ taskName +'</label><p>'+ taskDate +'</p>';

    taskContainer.appendChild(task);
}

<div class="task-section">
    <h2>Task</h2>
    <div class="task-container">
        <div class="task">
            <input type="checkbox" id="task1" name="task1" value="task1">
            <label for="task1">Task 1</label>
            <p>2 December</p>
        </div>
    </div>
    <div class="task-btn">
        <button id="addTask-btn" onclick="popUpWindow()">Add Task</button>
        <button id="completed-btn">Completed</button>
    </div>
</div>
<div class="addTaskPopUp">
    <div class="addTaskPopUp-content">
        <span class="close">&times;</span>
        <h2>Add Task</h2>
        <form action="">
            <div class="form-row">
                <label for="taskName">Task Name:</label>
                <input type="text" id="taskName" name="taskName" maxlength="20" required>
            </div>
            <div class="form-row">
                <label for="taskDate">Due Date:</label>
                <input type="date" id="taskDate" name="taskDate" min="<?php echo date('Y-m-d'); ?>" required> <!-- the min will set the minimum date to today and disable the past date -->
            </div>
            <button type="submit" id="addTask-btn2" onclick="addTask()">Add Task</button>
        </form>
    </div>
</div>