JQuery cloned element

Question

I am stuck on this problem. I am coding a task platform app. Whenever I try to save, the task clones itself. After each "Save Changes," there are more and more clones. I have rewritten the code so many times. But still, I am not successful. Please help me to find the error.

$("#taskSave").click(() => {
    const task = {
        id: Date.now(),
        imageUrl: $("#imageInput").val(),
        title: $("#titleInput").val(),
        description: $("#descriptionInput").val(),
        type: $("#typeInput").val(),
    }; 

    $("#overlay").hide();
    todos.push(task);
    saveStorage(todos);

    // reset input values
    $("#imageInput").val("");
    $("#titleInput").val("");
    $("#descriptionInput").val("");
    $("#typeInput").val("");
});

function saveStorage(todos) {
    localStorage.setItem("todos", JSON.stringify(todos));
    display(todos);
};

function display(todos) {
    $("#taskBoard").innerHTML = "";
    // .html("");

    todos.forEach(item => {
        let c = document.createElement("div");
        c.setAttribute("class", "card");
        c.setAttribute('id', item.id);
        c.innerHTML = `
            <div class="cardTop">
                <div class="binContainer">
                    <div class="binImage"></div>
                </div>
            </div>
            <img src="${item.imageUrl}" alt="task image">
            <h2>${item.title}<h2>
            <p>${item.description}</p>
            <div class="cardType">${item.type}</div>
        `;

        $("#taskBoard").append(c);
        // end 
    });
};

Answer 1

I've created a minimal working example, and the problem is in the cleanup of the HTML. You cannot use innerHTML on the JQuery object, or you use its html function or you need to retrieve the javascript object with $("#taskBoard")[0].

    // You can use:

    $("#taskBoard").html("");
    // or 
    // document.getElementById("taskBoard").innerHTML  = "";
    // or 
    // $("#taskBoard")[0].innerHTML = "";

    // But not:
    // $("#taskBoard").innerHTML = "";

The working example here on JSFiddle (on SO dont work localStorage)

let todos = [];
$("#taskSave").click(() => {
    const task = {
        id: Date.now()
    }; 
    todos.push(task);
        saveStorage(todos);
});

function saveStorage(todos) {
    localStorage.setItem("todos", JSON.stringify(todos));
    display(todos);
        console.log(todos);
};

function display(todos) {
    $("#taskBoard").html("");
    // or 
    // document.getElementById("taskBoard").innerHTML  = "";
    // or 
    // $("#taskBoard")[0].innerHTML = "";
    // But not
    // $("#taskBoard").innerHTML = "";
    

    todos.forEach(item => {
        let c = document.createElement("div");
        c.innerHTML = `
            <p>${item.id}</p>
        `;

        $("#taskBoard").append(c);
    });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="taskSave">
SAVE
</button>

<div id="taskBoard">

</div>