jquery附加代码计数器问题

Question

我需要一些关于此代码的帮助：

$("body").on("click", ".delrowcards", function() {
        var id = $(this).attr('data-id');
        $('.newrowcards'+id).remove();
        cards--;
});

$('.addnewrowcards').click(function() {
    cards++;
    $("#tab4").append('<div class="newrowcards'+cards+'"><div align="right" class="delrowcards" data-id="'+cards+'"><button type="button" class="btn btn-warning mright mtop"><i class="fa fa-trash-o" aria-hidden="true"></i></button></div>\
    <div class="col-md-3">\
        <label>Card Number</label>\
        <input id="cardnumber_'+cards+'" name="cardnumber_'+cards+'" class="form-control" data-rule-integer="true" data-msg-integer="Provide card Number" placeholder="Card Number" data-rule-maxlength="16" data-msg-maxlength="Maximum length allowed is 16 characters" />\
    </div>\
    <div class="col-md-3">\
        <label>Card Expiry</label>\
        <input id="cardexp_'+cards+'" name="cardexp_'+cards+'" class="form-control" placeholder="MM/YYYY" />\
    </div>\
    <div class="col-md-3">\
        <label>CVV</label>\
        <input id="cardcvv_'+cards+'" name="cardcvv_'+cards+'" placeholder="123" class="form-control" data-rule-minlength="3" data-msg-minlength="Minimum Length of CVV is 3" data-rule-integer="true" data-msg-integer="Provide CVV in numbers" />\
    </div>\
    <div class="col-md-3">\
        <label>Card Type</label>\
        <select name="cards_'+cards+'" id="cards_'+cards+'" class="form-control">\
            <option value="" selected="selected" disabled="disabled">(Select One)...</option>\
            \
                <option value="1">American Express</option>\
            \
                <option value="2">Discover</option>\
            \
                <option value="3">Master Card</option>\
            \
                <option value="4">Visa</option>\
            \
        </select>\
    </div>\
    </div>')
});

代码工作正常，但cards++;行和cards--;行无法正常工作，这会搞砸柜台。

对此有任何帮助将不胜感激。