jQuery Validation Test

Test "required_from_group" validating the entire form instead of the last account

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js "></script>
<script src="https://blucurrent.org/libraries/js/plugins/validate/minified/jquery.validate.min.js"></script>
<form id="survey" action="#" method="GET">
    <div id="account-wrapper"></div>
    <!-- End Account Wrapper -->
    <button type="submit">Submit</button>
    <button type="button" onclick="addAccount();">Add Account</button>
</form>
<script id="account-template" type="text/x-handlebars-template">
  <div id="account-{{id}}" class="account"> 
    <div class = "account-title ui-state-active">Account<button type="button"> Remove Account </button></div> 
      <div class="service-wrapper"> 
          <div class="service-container">
            <span class="title"> Account </span>
            {{#each account}}
            <span class="service-option">
              <input type="checkbox" class="service service-group-{{accountID}}" name="account[{{accountID}}][service]"  value="{{value}}" /> {{html}} 
              </span>
            {{/each}} 
          </div> <!-- End Service Container -->         
        </div> <!-- End Service Wrapper --> 
      </div> <!-- End Account -->
</script>

CSS

#account-wrapper div.account-title {
    border-radius: 5px 5px 0 0;
    font-size: 1.25em;
    font-weight: bold;
    padding: .5em .25em;
}
.account {
    clear:both;
}
.service-wrapper {
    width:40%
}
.service-wrapper, .loan-wrapper {
    display:inline-block;
    vertical-align:top;
}
.service-container {
    margin: 1em
}
.service-container span.title, .loan-wrapper div.loan-title {
    background:#235fac url('/libraries/css/blucurrent/images/ui-bg_highlight-hard_50_235fac_1x100.png') 50% 50% repeat-x;
    color: white;
    display: block;
    border-radius: 5px 5px 0 0;
    font-size: 1.25em;
    font-weight: bold;
    padding: .5em .25em;
}
.service-container textarea {
    margin: 1em 0;
    height:100px;
    width:100%;
    box-sizing:border-box;
}
.service-option {
    display:block;
}
.loan-wrapper {
    width: 45%;
    margin:1em;
    float:right;
}
.loan-wrapper div.loan-title button, #account-wrapper div.account-title button {
    float:right;
    font-size:.6em;
}
.loan {
    margin: 1em;
    border: #000000 solid thin;
    border-radius: 5px;
    display: inline-block;
}
.loan div.title {
    text-align: center;
    border-radius: 5px 5px 0 0;
    font-size: 1.5em;
    font-weight: bold;
    padding: .25em 0;
}
.loan div.body {
    margin:.5em;
}
.loan div.body select {
    margin:.5em;
    width: 127px;
}
.loan select {
    margin: .25em 0;
}
.loan button {
    display:block;
    margin:.5em auto;
}
.loan-container {
    overflow-y:auto;
    height:570px;
}
div.error-container {
    margin: 1em;
}

JavaScript

var validator = $("#survey").validate({
    errorClass: "error",
    validClass: "valid",
    submitHandler: function (form) {
        alert("Form is Valid");
        //form.submit();
    },
    invalidHandler: function (event, validator) {
        alert("Number of Invalids:" + validator.numberOfInvalids());
    },
    errorPlacement: function (error, element) {
        error.insertAfter(element);
    },
    rules: {}
});

var accountCounter = 0;
addAccount();

function addAccount() {
    var newAccount = {
        id: accountCounter,
        account: [{
            value: "1",
            html: "New Account",
            accountID: accountCounter
        },
        {value: "2",
            html: "Some Other Service",
            accountID: accountCounter}]
    };

    var template = Handlebars.compile($("#account-template").html());
    var result = template(newAccount);
    $("#account-wrapper").append(result);

    $("#account-wrapper .account:last div.account-title :button").click(function () {
        $(this).parents("div.account").remove();
    });

    
    //Doesn't seem to like this code, will throw error
$(".service-group-"+accountCounter).each(function() {
$(this).rules('add', {
              required: true,
              messages: {
                required: "Please select at least 1 product/service abover (or fill in other)."
              }
          });
        });
    
    accountCounter++;
}