jquery countdown event on finish did not show intended html

Question

I have been doing jquery countdown process with two date parameters. But when second date parameters end, the html intended did not show up that is ("is closed").

 $('#date_regist').countdown(s)
    .on('update.countdown', function(event) {   
    $(this).html("<b>will be open </b>"+event.strftime(format));})
    .on('finish.countdown', function(event) {
        $(this).countdown(f)
        .on('update.countdown', function(event) {
        $(this).html("<b> is open for </b>"+event.strftime(format));})
        .on('finish.countdown', function(event) {
        $(this).html("<b> is closed.</b>");
        });
    });
</script>

the intended script can be seen jsfiddle

Answer 1

You can remove element countdown and add a new:

fiddle: http://jsfiddle.net/dss5vkf7/3/

var s = '2015/10/19';
f = '2015/12/09';
format = '%-w <sup>week%!w</sup> ' + '%-d <sup>day%!d</sup> ' + '%H <sup>hr</sup> ' + '%M <sup>min</sup> ' + '%S <sup>sec</sup>';

$('#date_regist').countdown(s)
  .on('update.countdown', function(event) {
    $(this).html("<b>will be open </b>" + event.strftime(format));
  })
  .on('finish.countdown', function(event) {
  	$("#date_regist").remove()
  	$("body").append('<span id="date_regist"></span>')
    $("#date_regist").countdown(f)
      .on('update.countdown', function(event) {
        $(this).html("<b> is open for </b>" + event.strftime(format));
      })
      .on('finish.countdown', function(event) {
        $(this).html("<b> is closed.</b>");
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://rc.sefunsoed.org/assets/js/countdown/jquery.countdown.min.js"></script>
The registration <span id="date_regist"></span>