Question

I hope someone can help me with the following ‘problem’.

Starting with 700 credits, the client can buy items that appear in thumbnails(.box)
Adding thumbnails/items costs 25 credits, so when the client has less than 25 left, the add button should be disabled. (This works perfectly by the way)

However in the future I want more simple actions to decrease or increase the credits with diffrent amounts. I made a sample ‘action’ in my example, so when a client clicks the orange square it should decrease with 15. And that’s what causing the trouble. Because I don’t know how to put a limit to the diffrent decreasing values.

For example: if there are 24 credits left, the client can’t buy another box, but should be able to buy something for 15 credits.
(And never credits should never go below zero)

Can anyone help me accomplish this? Keep in mind I would also like to increase and decrease with more actions in the future. Thank you in advance.

JSFIDDLE

Code
JS

var counter = 0;


$("#money").val(250);

$('#purchase').click(function() {
    var box = $('<div class="box"' + (counter) + '><div class="yellow"' + (counter) + '><div class="buy"' + (counter) + '></div></div></div>').appendTo('.container');
    $("#money").val(Number($("#money").val()) - 26);

    if ($("#money").val() < 25) {
        $('#purchase').prop("disabled", true);
    }

    $('.buy').click(function() {
        $(this).fadeOut();
     if ($("#money").val() < 25) {
        $('#purchase').prop("disabled", true);

        $("#money").val(Number($("#money").val()) - 15);
}
    });




});

HTML

<button id="purchase">Add a box </button>
<input id="money"></input>
<div class="container"></div>

Answer 1

Check this out: http://jsfiddle.net/RbnBs/1/

var counter = 0;


$("#money").val(250);

$('#purchase').click(function() {
    if($("#money").val() < 25)
        return; // or alert('not enough money');

    var box = $('<div class="box"' + (counter) + '><div class="yellow"' + (counter) + '><div class="buy"' + (counter) + '></div></div></div>').appendTo('.container');
    $("#money").val(Number($("#money").val()) - 25).triggerHandler('change');
});

$('#money').change(function(){
    $('#purchase').prop("disabled", $(this).val() < 25);
});

$('.container').on('click', '.buy', function() {
    if($("#money").val() < 15)
        return; // or alert('not enough money');
    $(this).fadeOut();
    $("#money").val(Number($("#money").val()) - 15).triggerHandler('change');;
});