Button clicked does its function only once when it needs to do it for each item

Question

I apologize upfront if this problem is simple, I know I almost get the answer but I just ran out of ideas how to do it. I'll leave a link to the glitch project (copy pasted it there) so you can have a better visual understanding of what I'd like to do.

Here's the link: https://glitch.com/edit/#!/skitter-aftermath?path=index.html:9:7

Basically, the Add Todo button, does shows the "Added todo item!" notice, but it does so on every second added item ( I have it on .toggle, because I couldn't find a solution for .add & .remove to work both), while the Delete todo button, shows its notice only on one delete of a todo item, on every other deleted item it doesnt shows. Thanks in advance!

PS Here's the part of the code thats included in the above link that refers to the notices:

//Show an added notice when clicked Add Todo
    createAddedNotice:function(){
        var itemAdded = document.getElementById("added");
        itemAdded.classList.toggle("addedShow");
    },
    //Show completed notice when the list item is toggled as completed
    createCompletedNotice: function(){
        var itemCompleted = document.getElementById("completed");
        itemCompleted.classList.toggle("finished");
    },
    //Show deleted notice when the list item is deleted
    createDeletedNotice: function(){
        var itemDeleted = document.getElementById("deleted");
        itemDeleted.classList.add("deletedShow");
    },
    //Show toggled all notice when all list items are toggled by pressing TOGGLE ALL button
    createToggledAllNotice:function(){
        var allCompleted = document.getElementById("allCompleted");
        allCompleted.classList.toggle("allCompletedShow")
    },
    //Show deleted all notice when all list items are toggled by pressing DELETE ALL button
    createDeletedAllNotice: function(){
        var allDeleted = document.getElementById("allDeleted");
        allDeleted.classList.toggle("allDeletedShow");
    },
    //
    setUpEventListeners: function(){
        var todosUl = document.querySelector("ul");
        todosUl.addEventListener("click", function(event){
            var elementClicked = event.target;
            if(elementClicked.className === "deleteBtn"){
                handlers.deleteTodo(parseInt(elementClicked.parentNode.id));
            }
            //If the delete button is clicked, show the deleted notice
            if(elementClicked.className === "deleteBtn"){
                view.createDeletedNotice();
            }
            if (elementClicked.className === "toggleBtn") {
                todoList.toggleCompleted(parseInt(elementClicked.parentNode.id));
                var itemCompleted = document.getElementById("completed");
                itemCompleted.classList.remove("finished");
                view.displayTodos();
            }
            //If the completed button is clicked then show the completed notice
            if( elementClicked.className === "toggleBtn"){
                view.createCompletedNotice();
            }

            //If addTodo button is clicked, then remove the class (?)
    });

Answer 1

This is a problem with CSS animation's, you basically need to retrigger the animation, you can do this by removing the class and then adding it. But this does not work unless you have a sleep in between.

But there is a trick, you can cause a document reflow by asking the element it's offsetWidth.

Here is a example below.

createAddedNotice:function(){
    var itemAdded = document.getElementById("added");
    itemAdded.classList.remove("addedShow");
    itemAdded.offsetWidth; //document reflow
    itemAdded.classList.add("addedShow"); 
},

ps. The reason you toggle worked every second attempt, is because the first toggle would go on, you next one off, and then on again causing animation to restart..