Created inputs are only submitting the first input’s value, while the rest are blank. Why?

This is a ToDoList project from TheOdinProject. I have been stuck on this part of code for days, as my inputs will console.log empty strings in the module createTodos. I can’t seem to figure out why the first input, name, would work, but the other 3 would not. Does anyone know why?

Module createProject.js

import { createTodos } from "./createTodos";

function appendInputsAndButton(currentProject) {
  let inputContainer = document.createElement("div");
  inputContainer.className = "input-container";

  inputContainer.innerHTML = `<input class="name"></input> <input class="description"></input>  <input class="dueDate"></input>  <input class="priority"></input>
         <button class="submit-todos">Submit</button> <button class="close">X</button> `;
  currentProject.appendChild(inputContainer);
  
  inputContainer.querySelector('.submit-todos').addEventListener('click', (event)=>{
    event.stopPropagation();
    createTodos();
  })

  inputContainer.querySelector('.close').addEventListener('click',()=>{
    currentProject.removeChild(inputContainer);
  } )
}



function makeProject(name) {
  return {
    name: name,
    todos: [],
  };
}

export let projects = [];
export function createProject() {
  projects.push(
    makeProject(document.querySelector("#projectName").value.trim())
  );
  console.log(projects);
  let archives = document.querySelector(".container");
  archives.innerHTML = "";
  for (let i = 0; i < projects.length; i++) {
    let project = projects[i];
    let newProject = document.createElement("div");
    newProject.className = "project";
    newProject.textContent = project.name;
    newProject.addEventListener("click", (e) => {
      let currentProject = e.target;
      appendInputsAndButton(currentProject);
    });
    archives.appendChild(newProject);
  }
}

Module 2 createTodos.js

import { projects } from "./createProject"

function makeTodos (name, description, dueDate, priority){
    return {
        name: name,
        description: description,
        dueDate: dueDate,
        priority: priority,
        
    }
}

export function createTodos(){
    console.log("createTodos function executed");
    const name = document.querySelector('.name').value;
    const description = document.querySelector('.description').value;
    const dueDate = document.querySelector('.dueDate').value;
    const priority = document.querySelector('.priority').value;

    console.log("Name:", name);
    console.log("Description:", description);
    console.log("Due Date:", dueDate);
    console.log("Priority:", priority);

    // projects[0] is just to test
    projects[0].todos.push(makeTodos);
    console.log("Updated Todos:", projects[0].todos);
}

Module 3 index.js

import './styles.css';
import {createProject} from './createProject.js'


const submitButton = document.querySelector('#submit-btn');
submitButton.addEventListener('click', ()=> {
    createProject();
})