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

How will i take product with 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 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 classs, which made eaiser 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’m 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?