Working with "data-" attribute; Html console

by jasonkylefrank

HTML

<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<div id='log'></div>

<div>
    <p>Hello world, this is Html</p>
</div>

<button id="BtnAddLogMsg" data-clickCount="0">Add new log message</button>

CSS

div#log { 
    background: #5f5f5f; border-bottom: 1px solid #afafaf; 
    width: 100%;         height: 100px; 
    overflow: scroll;  
    font: 11px verdana;  color: white; 
    padding: 3px 5px; 
}
div#log p { 
    margin-bottom: 2px; 
}

JavaScript

var log = function(txt) { $("div#log").append("<p>"+txt+"</p>"); };
                          
_.delay(log, 1000, "hello world");
                          
log('dom ready');

$(function() {
    
    $('#BtnAddLogMsg').click(
        function() { 
            _.delay(log, 500, "a new log msg");
            
// !        // this is not working (returning NaN)
            var oldClickCount = $(this).data("clickCount");
            
            $(this).data("clickCount", 
                         ++oldClickCount);
            
            debugger;
            
            if($(this).data("clickCount") < 2)                        
                $(this).html($(this).html() + " again");
        }
    );
    
});