Problems with Countdown in JQuery

Question

When I double click the card the dialog pops up, and it is then possible to create comments. So far so good. When creating the comments it is possible to edit it.

Then I want to have a countdown for the "edit" eg. after 3 sec the "edit" might be invisible for the user. So far so good.

The issue is, after closing the window or saving the data via button and opening the same card the edit appears again for 3 sec and so on.

I want when creating the comments, and after 3 sec the "edit" never appears again. Just like on this site.

Any idea how to implement this?

Live Demo

jQuery: Countdown,

// Set the timer to countdown 
        var sec = 3;
        var timer = window.setInterval(function () {
            sec--;
            if (sec == -1) {
                $('.edit').addClass('hidden');
                clearInterval(timer);
            }
        }, 1000);

jQuery: Add comment,

function addComment(commentString) {

        var container = $('#divComments');
        var inputs = container.find('label');
        var id = inputs.length + 1;
        var data1 = {            
            commentString: commentString
        };

        var div = $('<div />', { class: 'CommentStyle' });

        $('<label />', {
            id: 'comment' + id,
            for: 'comment' + id,
            text: commentString
        }).on('change', function () {            
            data1.commentString = $(this).text();
        }).appendTo(div);      

        $('<br/>').appendTo(div);

        var $Image = $('<img />',
            {
                "src": "/Pages/Images/alert.png",
                "class": "CommentImage",
                "for": "comment" + id
            }).appendTo(container);

        var d = new Date();
        var $fulaDate = $('<div>' + d.getDate()
            + "-" + monthNames[d.getMonth()]
            + "-" + d.getFullYear()
            + "//" + d.getHours()
            + ":" + d.getMinutes()
            + '</div>').addClass('labelStyle').append(' ~').appendTo(div);

        var $edit = $('<p />', {
            class: 'edit',
            for: 'comment' + id,
            text: 'Edit'
        }).append(' ~').appendTo(div);

        var $delete = $('<p />', {
            class: 'delete',
            for: 'comment' + id,
            text: 'Delete'
        }).appendTo(div);

       // Set the timer to countdown 
        var sec = 3;
        var timer = window.setInterval(function () {
            sec--;
            if (sec == -1) {
                $('.edit').addClass('hidden');
                clearInterval(timer);
            }
        }, 1000);        
        div.appendTo(container).focus();
        container.data('comments').push(data1);
    }

Answer 1

EDIT

Please put this line after:

  $.each($currentTarget.data('comments'), function (i, comment) {
        addComment(comment.commentString);
    });

    $(".edit").each(function(){
        $(this).addClass("hidden");
    });

Rest all the lines should work fine. Try this solution. This may help you.