Plus minus button adjustment using jQuery

Question

Two things:

1. Adjusting the plus minus button so that when it reaches its min and max range, the corresponding button is disabled (and apply and remove CSS - active is bold, inactive normal).
2. Output the quantity in a different div. Also club the diff items.

For example:

I got three quantities displayed -

1. Chocolate, Vanilla, Dark Current
2. Chocolate minimum quantity is 1, the other two is 0 and the maximum quantity for all is 6. The default is 1 chocolate. It has to be there.

But the total quantity should not exceed 6. Also, in the external div, show Items - 1 chocolate

Now when you change the chocolate quantity to 2, ext div should show (note the plural) Items - 2 chocolates

Now when you select dark current (1 q) Items - 2 chocolates, 1 dark current

If you also select vanilla(1 q), now the div should show Items - 4 goodies

That means the external "div" displays information of only 2 items separately. If more, it clubs and generalizes the items, but shows the total quantity.

Now if you reduce dark current, the div should show Items - 2 chocolates, 1 vanilla

My issues -

1. For chocolate, minus button not honoring min quantity, sometimes shows zero.
2. Implementing dynamic information in an external div (for some reason, dark current does not increment in the fiddle).

Link - http://jsfiddle.net/YfgrK/1/

// Increment
if(defaultInp.val() < jQuery(defaultInp).data('max'))

    //If I put "var _val = " here
    //I get - [object Object] Chocolate. Why?
    $('input[name = ' + fieldName + ']').val(currentVal + 1);

    //Save for display in ext div
    var _val = currentVal + 1;

    //Show in div
    $(".count-pax").text(_val + ' ' + fieldName);
    console.log(currentVal);

    //Disable button
    if(defaultInp.val() == jQuery(defaultInp).data('max'))
        $(this).prop('disabled', true);
    $(".paxminus").removeAttr("disabled");
} 
else {
    //Otherwise put a 0 there
    $('input[name=' + fieldName + ']').val(0);

Next

// Decrement one
if(defaultInp.val() > minVal)

    //If I put "var _val = " here
    //I get - [object Object] Chocolate. Why?
    $('input[name=' + fieldName + ']').val(currentVal - 1);

    //Save for display in ext div
    var _val = currentVal - 1;

    //Show in div
    $(".count-pax").text(_val + ' ' + fieldName);

    //Disable button
    if(defaultInp.val() == jQuery(defaultInp).data('min'))
        $(this).prop('disabled', true);
    $(".paxplus").removeAttr("disabled");
} 
else {
    //Otherwise put a 0 there
    $('input[name=' + fieldName + ']').val(0);

Answer 1

To keep things organized, you could create a separate function just to update the total value info. In this function, go over the <li>'s, appending to a text our final count on each element that has a value greater than "0".

Call this function at the end of your click events. Here is an example: http://jsfiddle.net/YfgrK/4/

function UpdateCount() {
    var text = "";
    $("#myform li").each(function() {
        var field = $(this).find("input[field]").attr("field");
        var val = $(this).find("input[type=text]").val();
        if(parseInt(val) > 0) {
            text += (text == "" ? "" : ", ") + val + " " + field;
        }
    });
    $(".count-pax").text(text);
}

EDIT

Just to explain the inline text checking to add a comma, it's the same of doing this:

if(text != "")
    text += ", ";
text += val + " " + field;