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

• Nibin: When using html it doesn't show completely because everytime the new data replaces the old one..
• FeelRightz: @Outlooker but if i use back to append every time i clicked , item will keep adding again and again
• Nibin: When u are using html it replaces the entire content.Try putting an alert inside the if statement to really know how its working..
• FeelRightz: @Outlooker i know how it work , if u have a solution for prevent the function only show once then will be fine

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