How will I take the product with the same category into a string or an array?

<ul>
  <li class="product_cat-category-1"></li>
  <li class="product_cat-category-3"></li>
  <li class="product_cat-category-2"></li>
  <li class="product_cat-category-5"></li>
  <li class="product_cat-category-1"></li>
  <li class="product_cat-category-2"></li>
  <li class="product_cat-category-3"></li>
  <li class="product_cat-category-5"></li>
  <li class="product_cat-category-4"></li>
  <li class="product_cat-category-1"></li>
  <li class="product_cat-category-2"></li>
  <li class="product_cat-category-3"></li>
  <li class="product_cat-category-4"></li>
</ul>

what I want exactly is, to filter them and append them into a new div to create a filterable animation using gsap. this is actually a wordpress woocommerce product page.

last time I created a popup using gsap, and in that, I used something called the split() function

triggers.each(function(){
    let listClassName = $(this).attr('class').split(' ');
    let revealClassName = String(listClassName[listClassName.indexOf(listClassName.find(element => element === 'dasrgsap__reveal-trigger')) + 1]);
    const sectionReveal = $('.dasrgsap__reveal-content.' + revealClassName);
    const colReveal = $('.dasrgsap__reveal-content.' + revealClassName + ' .et_pb_column');

});

the trigger was ("dasrgsap__reveal-trigger sandra") and the popup content container was ("dasrgsap__reveal-container sandra"). both were given two separate classes, which made it easier to split and access them.

but in this case, woocommerce products list items are given too many classes, so the only class I can play with to get a specific category is the "product_cat-'product-category'",

I'm want to get a string or array of the same product category, I want to split "product_cat-" and "category-1" and get an array of that category but I'm not able to do it.

is this even possible?