toggleClass when maximum amount of appended items is reached

Question

Is it possible to use toggleclass on a button when a maximum amount of appended items is reached?

I want 6 appended divs/items to be the maximum. I've added a variable counter. So it increases when an item is appended and it decreases when the removebutton is clicked. The last step is to toggleclass the button (like a disabled button). So when the maximum amount is reached, the button toggleClass = red.

What I want:

On the sixth appended item, the button background changes to red and doesn't append anymore items (disabled). When the user removes one, the button toggles back to it's original state and the button fire the append event again. How can I integrate toggleClass in my 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

Answer 1

Updated the fiddle to work better. Only increment amount when you actually add. Else if people keep clicking add, even when it is red, amount will go up.

Try this update fiddle: http://jsfiddle.net/V395Y/2/

Basically you use addClass and removeClass. I updated both Jquery and your CSS (important part)

$(this).addClass("red");
$('#addbutton').removeClass('red');
background: red !important;

Since your button already has a class, the bgcolor for the Red class needs to be !important. This tells the broswer that, with the class red present the color red is more important then yellow. When you remove the class, ofc only yellow (the default) class stays and the button reverts to yellow.