JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <html lang="en">
    <body> 
  <div class="product-wrapper">
  
    <div class="product-item space purchasable-plp col-md-3  set-border">
      <div>
        <div class="col-md-12 badge-area">
        <div class=" col-md-2 left">
      </div>
      <div class=" col-md-2 right" dir="rtl">              
      </div>
    </div>
    <a class="thumb primary-image class-xs-12" href="#"></a>
    <div class="col-md-12 product-description">
    <div class="details brand">
        <a class="name" href="#">
          AB0061S ONE
      </a>
     </div>
     <div class="details counter-variant"> 23 <spring:theme code="plp.colors"/> | 1 Size
     </div>
     <div class="col-md-12 badges-container">
        <div class="badge-container">
          <span class="tooltiptext-badge tooltiptext-infoBadge ">
            <spring:theme code="plp.tooltip.progressive"/>
            <a href="#"> <spring:theme code="plp.tooltip.more"/></a>
          </span>
        </div>
        <div class="badge-container">
        
          <span class="tooltiptext-badge tooltiptext-infoBadge">
            <spring:theme code="plp.tooltip.light"/>
            <a href="#"> <spring:theme code="plp.tooltip.more"/></a>
          </span>
        </div>
     </div>
     </div>
  </div>
</div>
    <div class="product-item space purchasable-plp col-md-3  set-border">
        <div>
            <div class="col-md-12 badge-area">
                <div class=" col-md-1 left">
                    
                </div>
                <div class=" col-md-2 right" dir="rtl">
                   <b>
                    </b>
                </div>
            </div>
            <a class="thumb primary-image class-xs-12" href="#">
               
            </a>
            <div class="col-md-12 product-description">
                <div class="details brand">
                    <a class="name" href="#">
                        AC0062S TWO
                    </a>
                </div>
             ...

JavaScript

$(document).ready(function(){
	let cloned = false;
	$('button[name=viewALL]').click(function(){
  	if (cloned === false ) {
    	cloned = true;
  		$(".product-wrapper").children('.product-item').clone().appendTo(".product-wrapper");
    }
	});
});