view all products in un click JQuery

The goal is to create a ‘View all’ button under the product sheets which, when clicked, adds clones of the latter at the bottom of the page, filling all available spaces.
–> when i click a button “view all”, i want to see all the list of the products in alphabetical order. Can you help me to move on!! https://jsfiddle.net/oj20rwk3/

ABC.plp = {
    _autoload: [
        "viewAll"
    ],

    viewAll: function() {
        $(".plp-products-container").ready(function() {
            $(".button-row [name=viewALL]").click(function() {
                $(".product-item").show();
           });

           $(".button-row [name=viewALL]").click(function() {
                $(".product-item").hide();
           });
        });
    },

Thank you

Answer

First you need to hide all the product items and then use slice method to show the matching elements. The slice method accepts index (start & end). Read more here – https://api.jquery.com/slice/

$( ".product-item" ).hide();
$( ".product-item" ).slice( 6, 10 ).show();

To show all product items on click of button you would do the below.

$('button[name=viewALL]').click(function(){
   $( ".product-item" ).show();
});

To make the button toggle as View All / View Less you would do

$('button[name=viewALL]').click(function(){
   let btnText = $(this).text().toLowerCase();
   if (btnText === 'view all') {
      $(this).text('View Less');
      $( ".product-item" ).show();
   } else if (btnText === 'view less') {
      $(this).text('View All');
      $( ".product-item").not($( ".product-item").slice( 6, 10 )).hide();
   }
});

JS Fiddle – https://jsfiddle.net/pdj03sbo/

In the case of sorting in alphabetical order, it is better to sort the data in your controller before you print it in the html.