Jquery append and html

Question

updated At the beginning, when I click button, item from function checkinforfun loop again and again. And I wish to delete the previous to prevent it only show once.

OK now, so far i have found one way to not "delete" , is to change append to html , but when I change to html all item in function checkinforfun doesn't show completely

    if (i === checkin_info.length - 1) {
        $(".checkin_progress").append(check_progress_day);
    } else {
        $(".checkin_progress").append(check_progress_day + check_progress_dot1 + check_progress_dot2 + check_progress_dot3);

    }

DEMO 1

DEMO 2

Answer 1

One way of doing this would be emptying the div that has a class named checkin_progress .So each time you click on the button it will clear the previous html content and your function adds the new content.

$(".checkin_progress").empty();
    $.each(checkin_info, function (i, obj) {
            //Other code;
}

Fiddle

FYI

empty()

append vs html