JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.js"></script>
<form id="myform-s3">
    <div class="checkbox-block1">
        <input id="package-1-1" name="member[1][package][19]" type="checkbox" class="checkbox" value="100" style="float: left;">
        <input id="package-1-2" name="member[1][package][234]" type="checkbox" class="checkbox" value="300" style="float: left;">
        <input id="package-1-3" name="member[1][package][254]" type="checkbox" class="checkbox" value="500" style="float: left;">
    </div>
    <br/>
    <input type="submit" />
</form>

JavaScript

$(document).ready(function() {

    var names1 = ""; // create empty string
    $('[id^="package-1"]').each(function() { // grab each input starting w/ the class
        names1 += $(this).attr('name') + " "; // append each name + single space to string
    });
    names1 = $.trim(names1); // remove the empty space from the end

    $("#myform-s3").validate({
        rules: {
            // other rules
        },
        groups: {
            myGroup: names1 // reference the string
        },
        errorPlacement: function(error, element) {
            if (element.is(':radio') || element.is(':checkbox')) {
                error.insertBefore(element.next());
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) { // for demo
            alert('valid form');
            return false;
        }
    });

    $('[name^="member[1]"]').each(function() {
        $(this).rules('add', {
            require_from_group: [1, $('[id^="package-1"]')]
        });
    });

});