Sharing a Customization that reorders the Client Products/Services Dropdown Menu

Like the title says, I got tired of seeing Active and Non-Active products mixed in with each other, so this small hook reorders the dropdown into the <optgroup> tag for Active and Non-Active Products. Here's what it'll look like:

And... here's the code for the hook:

<?php

 add_hook('AdminAreaFooterOutput', 1, function($vars) {
   if ($vars['filename'] == 'clientsservices'){
     return "

       <script>
         $(document).ready(function(){
           var active;
           var nonactive;
           var i = 0;
           var total = $('#frm2 select[name=id] option').length;
           $('#frm2 select[name=id] option').each(function(){
             if ($(this).attr('style').indexOf('#FFF') > 0) {
               active = active + $(this).context.outerHTML;
             } else {
               nonactive = nonactive + $(this).context.outerHTML;
             }
             i++;
             if (i == total) {
               $('#frm2 select[name=id]').html(\"<optgroup label='Active'>\" + active + \"</optgroup><optgroup label='Non-Active'>\" + nonactive + \"</optgroup>\");
             }
           });
         });
       </script>

     ";
   }
 });

I created a new file under /includes/hooks/hook_betterClientProducts.php

Enjoy

which version of WHMCS is this supposed to be for ?

if I try it on v6.2.2, I see that it doesn't split the products correctly between active and non-active...

if I try it in v.7.2.2, I don't see anything new in the dropdown output - neither "Active" or "Non-Active" are added to the dropdown.... I can see the JS code in the page source, so the hook is being triggered, it just doesn't work.