Add new scroll content (clone) to jQuery UI slider?

Question

So I have a slider much like the following in the fiddle that needs to option to add new content (blocks, or scroll-content-item). Once this is added, I will have inline editing to change the following text, but I would prefer that when the block is cloned that is has no previous numbers or text within it. Thanks in advance. http://jsfiddle.net/4QEgr/1/

$(".addNew").on("click", function(event){
    //clone last block
    //add new block to slider div
});

My content item holds this, and I need to clear the label upon clone.

<div class="scroll-content-item ui-widget-header folder1">
    <span class="glyphicon glyphicon-folder-close icon-set" title='Folder1'>
        <label class='folderLbl'>Folder1</label>
    </span>
</div>

Answer 1

Just use this:

$(".addNew").on("click", function (e) {
    scrollContent.append(function(){
        return $(this).find('.ui-widget-header:last')
                      .clone()
                      .text(function(i, h){
                          return parseInt(h, 10)+1;
                      });
    });
});

When .addNew is clicked it fetches the last .ui-widget-header block, clones it, increments the number and appends it to the .scroll-content container div.

Here it is working: http://jsfiddle.net/v3K3m/

Update:

If your example HTML block was:

<div class="scroll-content-item ui-widget-header folder1">
    <span class="glyphicon glyphicon-folder-close icon-set" title='Folder1'>
        <label class='folderLbl'>Folder1</label>
    </span> 
</div>

Then you could just use:

$(".addNew").on("click", function (e) {
      scrollContent.append(function () {
          return $(this).find('.ui-widget-header:last')
              .clone()
              .find('.folderLbl')
              .html(function (i, h) {
                  return 'Folder' + (parseInt(h.match(/\d+$/), 10)+1);
              }).parents('.ui-widget-header');
      });
  });

Here it is working: http://jsfiddle.net/ybmYD/