jquery - toggleClass when maximum amount of appended items is reached -

is possible use toggleclass on button when maximum amount of appended items reached?

i want 6 appended divs/items maximum. i've added variable counter. increases when item appended , decreases when removebutton clicked. last step toggleclass button (like disabled button). when maximum amount reached, button toggleclass = red.

what want:

on sixth appended item, button background changes red , doesn't append anymore items (disabled). when user removes one, button toggles it's original state , button fire append event again. how can integrate toggleclass in code?

html

<div id="addbutton">add</div> <div id="box"></div> 

js

var amount = 0; var div = '<div>' +     '<input type="text"/>' +     '<input type="button" class="removebtn" value="delete"/>' +     '</div>';  $('#addbutton').click(function () {     amount++;     if (amount < 6) {         $('#box').append(div);         //alert(amount);     } else {         $(this).toggleclass(".red");     } });   $('.removebtn').live('click', function () {     $(this).parent().remove();     amount--; }); 

jsfiddle

updated fiddle work better. increment amount when add. else if people keep clicking add, when red, amount go up.

try update fiddle: http://jsfiddle.net/v395y/2/

basically use addclass , removeclass. updated both jquery , css (important part)

$(this).addclass("red"); $('#addbutton').removeclass('red'); background: red !important; 

since button has class, bgcolor red class needs !important. tells broswer that, class red present color red more important yellow. when remove class, ofc yellow (the default) class stays , button reverts yellow.