Equal Height Multiple Selectors

I found the following script on Codepen and adapted it for a project I am working on: https://codepen.io/RogerHN/pen/YNrpVa

I basically changed the selector:

        var matchHeight = function () {

            function init() {
                eventListeners();
                matchHeight();
            }

            function eventListeners(){
                $(window).on('resize', function() {
                    matchHeight();
                });
            }

            function matchHeight(){
                var groupName = $('#services h3');
                var groupHeights = [];
    
                groupName.css('min-height', 'auto');
    
                groupName.each(function() {
                    groupHeights.push($(this).outerHeight());
                });
    
                var maxHeight = Math.max.apply(null, groupHeights);
                groupName.css('min-height', maxHeight);
            };

            return {
                init: init
            };

        } ();

        $(document).ready(function() {
            matchHeight.init();
        });

I have seen lots of equal height scripts, but alot of them don't work when I resize my screen from a small window size to a big window size. This script does, but when I add multiple selectors it doesn't work as expected.

I tried var groupName = $('#services h3, #services .info'); which works, but makes all the h3's and all the .info's the same height. So, if the tallest h3 is 100px and the largest .info is 500px, all of the h3's and the .info's become 500px. What I would like is the h3's to all become 100px (since that's the largest h3) and all of the .info's to become 500px (since that's the largest .info.

I'm not sure how to explain it. But this is grabbing all of the selectors and seeing them all as one selection rather than keeping the two selectors separate and just applying the script within a specific selector, which is what I was envisioning.

Any help is appreciated.

Thanks,
Josh

Putting everything into the selector makes jquery thinks all of them as one. My suggestion is make the function receives selectors serparately:

   function matchHeight(selector){
    var groupName = $(selector);

and call the it on each selector:

$(document).ready(function() {
    matchHeight.init();
    matchHeight.matchHeight('#some-id');
    matchHeight.matchHeight('.some-class');
});

Hopefully it works.