jquery count with each clone instance and display count

Task I am cloning a div.cloneable with the following function:

$('#addBtn').click(function() {
 var c = $('.cloneable:first').clone(true);
 $('.cloneable:last').after(c);
}
});

Then, after I clone .cloneable, I can 开发者_JS百科remove any instance using this function:

$('.dltBtn').click(function() {
$(this).closest('.cloneable').remove();
$('.dltBtn').attr('disabled',($('.cloneable').length  

Problem: I have a line of html in div.cloneable: "Adobe Flash Streaming Service #1". How do I increment/decrement and display the #1, increment when I clone so that it says #2, *3, etc., and decrementing when I remove the div.cloneable element?

---

I think what you're probably looking for is the innerHTML property of the div object. Then you can split the resultant string on #, take the second element, and parseInt() on it, then increment it. Then set the innerHTML back.

Like so:

var inner = c.innerHTML;
var arr = inner.split("#");
var numString = arr[1];
var myNum = parseInt(numString);
myNum ++;
c.innerHTML = "Adobe Flash Streaming Service #" + myNum

or shorter:

 c.innerHTML = "Adobe Flash Streaming Service #" + (parseInt(c.innerHTML.split("#")[1]) + 1)