JQuery append и html

Question

обновлено В начале, когда я нажимаю кнопку, элемент из функции checkinforfun повторяется снова и снова. И я хочу удалить предыдущий, чтобы предотвратить его показ только один раз.

ОК сейчас, до сих пор я нашел один способ не «удалить», чтобы изменить append к html, но когда я изменяю html все пункт в функции checkinforfun не показывает полностью

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

Один из способов сделать это будет опорожнение DIV, который имеет класс с именем checkin_progress. Поэтому каждый раз, когда вы нажимаете кнопку, он очищает предыдущий контент html, и ваша функция добавляет новый контент.

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

Fiddle

FYI

empty()

append vs html